Responsive webpagina ontwerp -Viewport

Wat is de viewport?

De viewport (viewport) is het zichtbare gebied van de gebruiker op de webpagina.

De viewport verschilt per apparaat, en is op een mobiele telefoon kleiner dan op een computerscherm.

Vóór tablet computers en smartphones waren webpagina's alleen ontworpen voor computermonitoren, en het was gebruikelijk om statische ontwerpen en vaste grootte te hebben.

Daarna, toen we begonnen met het surfen op het internet met tablet computers en smartphones, waren webpagina's van vaste grootte te groot om in het viewport te passen. Om dit probleem op te lossen, zullen de browsers op deze apparaten de hele webpagina proportional inkrimpen om de schermgrootte te passen.

Dit is niet perfect! Het is een snelle correctie.

viewport in te stellen

HTML5 introduceerde een methode die webontwerpers mogelijk maakt om <meta> tag op alle webpagina's opnemen om de viewport te controleren.

U moet de volgende <meta> Viewport-element:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Het biedt de browser instructies over hoe de grootte van de pagina en de zoomschaal te controleren.

width=device-width Deel van de instellingen zet de breedte van de pagina in overeenstemming met de schermbreedte van het apparaat (afhankelijk van het apparaat).

Wanneer de browser de pagina voor het eerst laadt,initial-scale=1.0 Deel van de instellingen voor de initiële zoomniveau.

Hier zijn voorbeelden van webpagina's zonder viewport meta-tag, en webpagina's met viewport meta-tag:

Tip:Als u deze pagina op een smartphone of tablet bekijkt, kunt u op de twee onderstaande links klikken om de verschillen te zien.



Zonder viewport meta-tag.


Met viewport meta-tag.

Passend maken van de inhoud aan de grootte van het viewport.

Gebruikers zijn gewend om websites op desktopcomputers en mobiele apparaten verticaal te scrollen, in plaats van horizontaal!

Daarom kan het forceren van gebruikers om horizontaal te scrollen of in te zoomen om de hele webpagina te bekijken, een slechte gebruikerservaring veroorzaken.

Nog enkele aanvullende regels die gevolgd moeten worden:

1. Gebruik geen grotere vaste breedte elementen - Bijvoorbeeld, als de breedte van een afbeelding groter is dan de breedte van het viewport, kan dit leiden tot horizontale scrolling in het viewport. Zorg ervoor dat deze inhoud aangepast wordt om in het viewport past.

2. Laat de inhoud niet afhankelijk zijn van een specifieke viewport breedte om goed te renderen - Vanwege de grote variatie in schermgrootte en breedte in apparaten op basis van CSS pixels, zou de inhoud niet afhankelijk moeten zijn van een specifieke viewport breedte om goed te renderen.

3. Gebruik CSS media queries om verschillende stijlen toe te passen op kleine en grote schermen - Het instellen van een grotere CSS absolute breedte voor paginaelementen leidt ertoe dat het element te breed is voor het viewport op kleinere apparaten. In plaats daarvan zou je relative breedte waarden moeten overwegen, zoals width: 100%. Wees ook voorzichtig met het gebruik van grotere absolute positie waarden, wat kan leiden tot het wegschuiven van het element buiten het viewport van kleine apparaten.