Ik weet zeker dat veel mensen de Viewport-metatag gebruiken om hun ontwerp te schalen, maar wist je dat deze tag ook erg handig kan zijn voor mobiele apparaten? Als u geen tijd heeft om uw project te converteren, lees dan toch dit artikel over hoe u de Viewport-tag kunt gebruiken om de weergave van uw project op mobiele apparaten te verbeteren.

Belangrijkste gebruik van de Viewport-tag

De Viewport-metatag wordt doorgaans gebruikt om het ontwerp te schalen om de breedte en hoogte van het venster op mobiele apparaten in te stellen. Hieronder ziet u een voorbeeld van een Viewport-tag.

< meta name = "viewport" content = "breedte=apparaatbreedte, initiële schaal=1,0">

De Viewport-tag gebruiken voor sites die niet zijn ontworpen voor mobiele apparaten.

Zoals u weet is de standaard viewportbreedte op de iPhone 980px. Maar het kan zijn dat jouw ontwerp niet binnen dit bereik past. Het kan breder of smaller zijn. Hieronder staan ​​twee voorbeelden waarbij u deze tags kunt gebruiken om de weergave van uw site op mobiele apparaten te verbeteren.

Voorbeeld

De schermafbeelding aan de linkerkant laat zien hoe de site eruit zal zien zonder de tag. Zoals u kunt zien, raakt de pagina beide zijden. De webmaster heeft een Viewport-tag toegevoegd om de vensterbreedte in te stellen op 1024px, zodat er wat extra ruimte overblijft aan de linker- en rechterkant.

< meta name = "viewport" content = "width=1024" >

Nog een voorbeeld.

Als uw project te smal is, kan dit ook voor problemen zorgen. Laten we zeggen dat de breedte van uw ontwerpcontainer 700 px is en dat is niet correct. Het ziet eruit als de schermafbeelding aan de linkerkant, waar zich aan de rechterkant een grote lege ruimte bevindt.

U kunt dit eenvoudig oplossen door de vensterbreedte in te stellen op 720px. De breedte van uw ontwerp verandert niet, maar de iPhone wordt geschaald zodat deze past op 720px.

< meta name = "viewport" content = "width=720" >

Veel voorkomende fout

Een veelgemaakte fout is dat mensen vaak toevoegen initiële - schaal = 1 voor ontwerpen die niet op maat zijn. Hierdoor wordt de pagina op 100% schaal weergegeven zonder te schalen. Als uw project niet op het scherm past, moeten gebruikers uitzoomen om de volledige pagina te zien. Het is nog erger als ze combineren gebruiker - schaalbaar = nee of maximum - schaal = 1 Met initiële - schaal = 1. Hierdoor wordt de zoomoptie uitgeschakeld. Gebruikers hebben niet de mogelijkheid om de paginagrootte te verkleinen om deze te bekijken.

Laten we een eenvoudige pagina maken met minimale opmaak:

Hallo wereld!

Laten we deze pagina nu op een mobiel apparaat openen. Nadat we het hebben geopend, zullen we zien dat onze pagina er ongeveer zo uitziet:

Zoals u kunt zien, is de tekst te klein om te lezen, is er veel lege ruimte en om deze tekst te kunnen lezen, moeten we erop inzoomen.

Waarom gebeurt dit?

Het probleem met mobiele browsers

Bij het vergelijken van mobiele en desktopbrowsers is het meest voor de hand liggende verschil schermgrootte. Mobiele browsers geven sites die zijn ontworpen voor reguliere desktopbrowsers standaard veel slechter weer dan ze zouden kunnen: ofwel door de schaal te verkleinen, tekst en andere inhoud te klein en onleesbaar te maken (zoals in onze versie), ofwel door slechts een klein deel van de inhoud weer te geven. site die op het scherm past.

Als je er logisch over nadenkt, is dit logisch: een mobiele browser ziet een pagina en gaat ervan uit dat deze is gemaakt voor de desktopversie van de browser, wat voor de overgrote meerderheid van de sites geldt. Op basis hiervan stelt deze browser de paginabreedte in op 980px (Safari iPhone) en probeert deze optimaal op het smartphonescherm te passen, door deze op de meest verkleinde schaal weer te geven. Normaal gesproken is de breedte van sites ongeveer deze, dus wanneer u een gemiddelde webpagina op een mobiel apparaat opent, wordt deze over de volledige breedte uitgestrekt, maar 2-3 keer kleiner dan de oorspronkelijke grootte.

Als we de site voor smartphones willen optimaliseren, werkt deze optie dus niet. We moeten de browser op de een of andere manier vertellen dat onze pagina bedoeld is om op mobiele apparaten te worden weergegeven en regels instellen voor het juiste gedrag van de viewport.

En dit is precies waarom we de metatag zullen gebruiken kijkvenster, dat door Apple werd geïntroduceerd en, zoals gewoonlijk, door anderen werd gekopieerd.

Toevoegen aan blok de volgende regel:

En dit is wat er als resultaat zal gebeuren:

Het is een heel andere zaak. Door de viewport-metatag in te stellen op “apparaatbreedte”, vertellen we de browser dat de breedte van de viewport de breedte van dat apparaat is, in plaats van de standaardbreedte van 980px die deze standaard zou aannemen. Op een groot aantal smartphones is de schermbreedte 320px (in portretmodus). Je kunt de breedte zelf instellen op 320px, wat hetzelfde resultaat geeft, maar op sommige smartphones kan de schermbreedte anders zijn, dus de beste optie is om apparaatbreedte te gebruiken.

Een van de meest voorkomende opties voor het definiëren van de viewport is de volgende optie:

die de breedte van de pagina definieert en de initiële schaal instelt.

Deze optie kun je ook vaak vinden:

In dit geval wordt de pagina ingesteld op de breedte van het apparaat waarop deze wordt geopend en is elke vorm van schalen verboden, zowel aanvankelijk bij het laden als aangepast schalen na het laden. In deze modus functioneert de mobiele webpagina als een mobiele applicatie, waarbij de gebruiker alleen verticaal of horizontaal kan scrollen. Het is echter beter om een ​​dergelijke invoer niet blindelings te gebruiken, omdat de gebruiker niet kan worden verboden om naar believen uit en in te zoomen, tenzij het ontwerpidee dit vereist. Een te klein lettertype schaadt bijvoorbeeld de leesbaarheid van de tekst en in dit geval is het noodzakelijk om een ​​benadering te gebruiken.

De viewport-metatag is relatief nieuw en wordt daarom momenteel niet door alle browsers ondersteund, vooral niet door oudere smartphonemodellen. In dergelijke gevallen is het zinvol om enkele oude methoden te gebruiken waarmee de browser de pagina kan identificeren als geoptimaliseerd voor mobiel internet. Dit kan gedaan worden met behulp van de volgende metatags:

U kunt meer lezen over deze en andere specifieke mobiele tags.

Mogelijke opties voor de viewport-metatag

Attribuut	Mogelijke betekenis	Beschrijving
breedte	(van 200px – 10.000px) of de apparaatbreedteconstante.	Definieert de breedte van het venster. Als de breedte niet is opgegeven, wordt de waarde ingesteld op 980px in mobiele Safari, 850px in Opera, 800px in Android WebKit en 974px in IE.
hoogte	Niet-negatieve gehele waarde (van 223px tot 10.000px) of apparaathoogte constant	Definieert de hoogte van het venster. In de meeste gevallen kan dit kenmerk worden genegeerd
initiële schaal	Waarde 1,0 - niet schalen	Definieert de initiële paginaschaal. Hoe hoger het getal, hoe hoger de schaal.
door de gebruiker schaalbaar	nee of ja	Bepaalt of de gebruiker kan inzoomen op het venster. De standaardinstelling is “ja” in mobiele Safari.
minimale schaal	Nummer met een punt (van 0,1 tot 10). 1.0 - niet schalen	Definieert de minimale viewportschaal. De standaardwaarde is “0,25” in mobiele Safari.
maximale schaal	Nummer met een punt (van 0,1 tot 10). 1.0 - niet schalen	Definieert de maximale viewport-zoom. De standaardwaarde is “1.6” in mobiele Safari.

Viewport-compatibiliteitstabel.

Twee kijkvensters

Laten we zeggen dat de viewport te smal is voor onze CSS-sjabloon. De voor de hand liggende oplossing is om de viewport breder te maken. Laten we echter eerst het concept van viewport in twee delen verdelen: visuele viewport en paginaviewport.

Het concept van viewports wordt heel goed uitgelegd door George Cummins op Stack Overflow:

Beschouw een paginaviewport als een grote afbeelding met een constante grootte en vorm. Stel je nu een kleiner frame voor waardoor je naar dit grote beeld kijkt. Dit frame is omgeven door een ondoorzichtig materiaal dat voorkomt dat je het hele grote beeld ziet, behalve delen ervan. Het deel van de grote afbeelding dat door het frame heen zichtbaar is, is de visuele kijkpoort. Als u met het kader weggaat van het grote beeld (uitzoomen, dat wil zeggen de schaal verkleinen), kunt u het hele beeld in één keer zien, of dichterbij komen (inzoomen, de schaal vergroten), dan kunt u slechts een deel van de afbeelding zien. afbeelding. U kunt het frame ook draaien om de richting ervan te wijzigen (staand of liggend), terwijl de grootte en vorm van de grote afbeelding (paginaviewport) altijd ongewijzigd blijven.

Visuele kijkpoort- deel van de pagina dat momenteel zichtbaar is op het scherm. De gebruiker kan scrollen om het zichtbare deel van de pagina te wijzigen, of zoom gebruiken om de grootte van de visuele viewport te wijzigen.

De pagina-indeling, vooral als de breedte ervan is opgegeven als een percentage, wordt relatief ten opzichte van de pagina berekend pagina-viewport, die aanzienlijk breder is dan de visuele viewport.

Het -element neemt dus aanvankelijk de breedte van de paginaviewport aan en vervolgens gedraagt ​​de CSS zich alsof het scherm veel breder is dan het telefoonscherm. Hierdoor krijgt de site hetzelfde gedrag als in een desktopbrowser.

Hoe breed is de visuele viewport zelf? Het hangt af van de browser. Safari iPhone gebruikt 980px, Opera gebruikt 850px, Android WebKit gebruikt 800px en IE gebruikt 974px.

Sommige browsers gedragen zich anders:

Symbian WebKit probeert de paginaviewport gelijk te stellen aan de visuele viewport, en dit betekent dat elementen met percentagebreedte zich onvoorspelbaar kunnen gedragen. Als de pagina echter vanwege absolute waarden niet in de visuele viewport past, rekt de browser de paginaviewport uit tot maximaal 850 pixels.

Samsung WebKit zorgt ervoor dat de paginaviewport even breed is als het breedste element.

Op BlackBerry zal de paginaviewport bij een schaal van 100% in ieder geval gelijk zijn aan de visuele viewport.

Zoomen

Beide viewports worden gemeten in CSS-pixels. Tijdens het schalen veranderen de afmetingen van de visuele viewport echter (naarmate u inzoomt passen er minder CSS-pixels op het scherm), terwijl de afmetingen van de paginaviewport ongewijzigd blijven. (Als dit niet het geval zou zijn, zou de browser de pagina voortdurend opnieuw weergeven vanwege de herberekening van de procentuele breedte.)

Inzicht in de paginaviewport

Om de grootte van een paginaviewport beter te begrijpen, moet u kijken naar wat er gebeurt op de kleinst mogelijke paginaschaal. De meeste mobiele browsers geven elke pagina standaard op de kleinste schaal weer.

Feit is dat de afmetingen van de viewport van de browserpagina volledig samenvallen met het scherm op de maximaal verkleinde schaal en dus gelijk zijn aan de visuele viewport.

De breedte en hoogte van de paginaviewport zijn dus gelijk aan alles wat op de kleinste schaal op het scherm wordt weergegeven. Wanneer de gebruiker inzoomt, blijven deze afmetingen ongewijzigd.

De breedte van de paginaviewport is altijd hetzelfde. Als u de oriëntatie van het smartphonescherm verandert, verandert de visuele viewport, maar tegelijkertijd zal de mobiele browser zich aanpassen aan de nieuwe oriëntatie door iets in te zoomen, zodat de paginaviewport weer dezelfde breedte heeft als de visuele viewport.

Dit heeft invloed gehad op de hoogte van de paginaviewport, die nu veel kleiner is dan in staande richting. Maar voor ontwikkelaars is breedte belangrijker dan hoogte.

Android en doeldichtheiddpi

Android-apparaten hebben hun eigen viewport-kenmerk dat het schalen voor beeldschermen met verschillende resoluties uitschakelt.

Er vindt geen schaalvergroting plaats op HDPI-apparaten (240 dpi).

Deze invoer betekent dat er op geen enkel Android-apparaat wordt geschaald.

Is het gedeelte van het venster waarin webinhoud te zien is. Dit is vaak niet hetzelfde formaat als de weergegeven pagina, in welk geval de browser schuifbalken biedt waarmee de gebruiker kan scrollen en toegang heeft tot alle inhoud.

Apparaten met een smal scherm (bijvoorbeeld mobiele telefoons) geven pagina's weer in een virtueel venster of kijkvenster, dat meestal breder is dan het scherm, en verkleinen vervolgens het weergegeven resultaat zodat het allemaal in één keer zichtbaar is. Gebruikers kunnen vervolgens pannen en zoomen om verschillende delen van de pagina te bekijken. Als een mobiel scherm bijvoorbeeld een breedte van 640px heeft, kunnen pagina's worden weergegeven met een virtuele viewport van 980px, waarna deze wordt verkleind zodat deze in de ruimte van 640px past.

Dit wordt gedaan omdat veel pagina's niet voor mobiel zijn geoptimaliseerd en kapot gaan (of er op zijn minst slecht uitzien) wanneer ze worden weergegeven op een kleine viewportbreedte. Deze virtuele viewport is een manier om niet voor mobiel geoptimaliseerde sites er over het algemeen beter uit te laten zien op apparaten met een smal scherm.

Voer de viewport-metatag in

Dit mechanisme is echter niet zo goed voor pagina's die zijn geoptimaliseerd voor smalle schermen met behulp van mediaquery's - als de virtuele viewport bijvoorbeeld 980px is, zullen mediaquery's die op 640px of 480px of minder verschijnen nooit worden gebruikt, waardoor de effectiviteit van dergelijke zoekopdrachten wordt beperkt. responsieve ontwerptechnieken.

Om dit probleem te verhelpen heeft Apple de "viewport-metatag" in Safari iOS geïntroduceerd, zodat webontwikkelaars de grootte en schaal van de viewport kunnen bepalen. Veel andere mobiele browsers ondersteunen deze tag nu, ook al maakt deze geen deel uit van een webstandaard. Apple" De documentatie van Google legt goed uit hoe webontwikkelaars deze tag kunnen gebruiken, maar we moesten wat speurwerk doen om erachter te komen hoe we deze tag precies in Fennec moesten implementeren. De documentatie van Safari zegt bijvoorbeeld dat de inhoud een 'door komma's gescheiden lijst' is, maar bestaande browsers en webpagina's gebruiken elke combinatie van komma's, puntkomma's en spaties als scheidingstekens.

Lees meer over viewports in verschillende mobiele browsers in A Tale of Two Viewports op quirksmode.org.

Basisbeginselen van Viewport

Een typische voor mobiel geoptimaliseerde site bevat ongeveer het volgende:

De eigenschap width bepaalt de grootte van de viewport. Het kan worden ingesteld op een specifiek aantal pixels, zoals breedte=600, of op de speciale waarde device-width , wat de breedte van het scherm is in CSS-pixels op een schaal van 100%. (Er zijn overeenkomstige waarden voor hoogte en apparaathoogte, wat handig kan zijn voor pagina's met elementen waarvan de grootte of positie verandert op basis van de hoogte van de viewport.)

De eigenschap initial-scale bepaalt het zoomniveau wanneer de pagina voor het eerst wordt geladen. De eigenschappen maximum-scale , minimum-scale en user-scalable bepalen hoe gebruikers op de pagina mogen in- of uitzoomen.

Een pixel is geen pixel

De afgelopen jaren zijn de schermresoluties zo groot geworden dat individuele pixels moeilijk te onderscheiden zijn met het menselijk oog. Recente smartphones hebben bijvoorbeeld over het algemeen een 5-inch scherm met resoluties van meer dan 1920-1080 pixels (~400 dpi). Hierdoor kunnen veel browsers hun pagina's in een kleiner fysiek formaat weergeven door meerdere hardwarepixels voor elke CSS-"pixel" te vertalen. Aanvankelijk veroorzaakte dit problemen met de bruikbaarheid en leesbaarheid op veel voor aanraking geoptimaliseerde websites. Peter-Paul Koch schreef over dit probleem in Een pixel is geen pixel.

Op schermen met een hoge dpi worden pagina's met initiële schaal = 1 effectief ingezoomd door browsers. Hun tekst zal vloeiend en helder zijn, maar hun bitmapafbeeldingen zullen waarschijnlijk niet profiteren van de volledige schermresolutie. Om scherpere afbeeldingen op deze schermen te krijgen, willen webontwikkelaars afbeeldingen (of hele lay-outs) mogelijk op een grotere schaal ontwerpen dan hun uiteindelijke formaat en ze vervolgens verkleinen met behulp van CSS of viewport-eigenschappen. Dit komt overeen met de CSS 2.1-specificatie, die zegt:

Als de pixeldichtheid van het uitvoerapparaat heel anders is dan die van een typisch computerscherm, moet de user-agent de pixelwaarden opnieuw schalen. Het wordt aanbevolen dat de pixeleenheid verwijst naar het gehele aantal apparaatpixels dat de referentiepixel het beste benadert. Het wordt aanbevolen dat de referentiepixel de visuele hoek is van één pixel op een apparaat met een pixeldichtheid van 96 dpi en een afstand tot de lezer van een armlengte.

Voor webontwikkelaars betekent dit dat de grootte van een pagina veel kleiner is dan het werkelijke aantal pixels en dat browsers hun lay-outs en afbeeldingen dienovereenkomstig kunnen aanpassen. Maar onthoud dat niet alle mobiele apparaten even breed zijn; u moet ervoor zorgen dat uw pagina's goed werken in een grote variatie aan schermformaten en oriëntaties.

De standaardpixelverhouding is afhankelijk van de weergavedichtheid. Op een scherm met een dichtheid van minder dan 200 dpi is de verhouding 1,0. Op beeldschermen met een dichtheid tussen 200 en 300 dpi is de verhouding 1,5. Voor beeldschermen met een dichtheid van meer dan 300 dpi is de verhouding de integer floor( dikte/150dpi). Houd er rekening mee dat de standaardverhouding alleen waar is als de viewport-schaal gelijk is aan 1. Anders hangt de relatie tussen CSS-pixels en apparaatpixels af van het huidige zoomniveau.

Viewport-breedte en schermbreedte

Sites kunnen hun viewport op een specifiek formaat instellen. De definitie "width=320, initial-scale=1" kan bijvoorbeeld worden gebruikt om precies op een klein telefoonscherm in portretmodus te passen. Dit kan problemen veroorzaken als de browser een pagina niet groter weergeeft. Om dit op te lossen, zullen browsers indien nodig de breedte van de viewport vergroten om het scherm op de gevraagde schaal te vullen. Dit is vooral handig op apparaten met een groot scherm, zoals de iPad (Allen Pike's keuze voor een viewport voor iPad-sites biedt een goede verklaring voor webontwikkelaars.)

Voor pagina's die een initiële of maximale schaal instellen, betekent dit dat de eigenschap width zich feitelijk vertaalt in a minimum breedte van het kijkvenster. Als uw lay-out bijvoorbeeld minimaal 500 pixels breed moet zijn, kunt u de volgende opmaak gebruiken. Wanneer het scherm meer dan 500 pixels breed is, zal de browser de viewport uitbreiden (in plaats van in te zoomen) zodat deze op het scherm past:

Andere beschikbare zijn minimum-scale , maximum-scale en user-scalable . Deze eigenschappen zijn van invloed op de initiële schaal en breedte, en beperken ook de veranderingen in het zoomniveau.

Niet alle mobiele browsers verwerken oriëntatiewijzigingen op dezelfde manier. Mobile Safari zoomt bijvoorbeeld vaak alleen maar in op de pagina wanneer er van staand naar liggend wordt overgeschakeld, in plaats van de pagina op te maken zoals deze oorspronkelijk in liggend formaat zou zijn geladen. Als webontwikkelaars willen dat hun schaalinstellingen consistent blijven bij het wisselen van oriëntatie op de iPhone, moeten ze een maximale schaalwaarde toevoegen om dit zoomen te voorkomen, wat het soms ongewenste neveneffect heeft dat gebruikers ervan worden weerhouden in te zoomen:

Onderdruk de kleine zoomlens die door veel smartphones wordt toegepast door de initiële schaal- en minimale schaalwaarden in te stellen op 0,86. Het resultaat is dat horizontaal scrollen in elke richting wordt onderdrukt en dat de gebruiker kan inzoomen als hij dat wil.

Gangbare viewport-formaten voor mobiele apparaten en tablets

Als u wilt weten welke mobiele apparaten en tablets welke viewportbreedtes hebben, is er een uitgebreide lijst met . Dit geeft informatie zoals de breedte van de viewport bij portret- en landschapsoriëntatie, evenals de fysieke schermgrootte, het besturingssysteem en de pixeldichtheid van het apparaat.

Specificaties

Specificatie	Status	Opmerking
CSS-apparaataanpassing De definitie van " "in die specificatie.	Werkend ontwerp	Beschrijft niet-normatief het Viewport META-element

Er is duidelijk vraag naar de viewport-metatag, omdat deze wordt ondersteund door de populairste mobiele browsers en door duizenden websites wordt gebruikt. Het zou goed zijn om een ​​echte standaard te hebben voor webpagina's om de eigenschappen van de viewport te controleren. Naarmate het standaardisatieproces vordert, zullen wij bij Mozilla ons best doen om op de hoogte te blijven van eventuele wijzigingen.

Heel vaak begrijpen mensen het verschil niet tussen breedte (breedte) en apparaatbreedte (en bovendien zijn er voorbeelden met min-device-width en max-device-width), met behulp van CSS-mediaquery's. Dit misverstand leidt tot slechte code en aanzienlijk meer werk voor de ontwikkelaar. Deze vraag komt veel voor op de SitePoint-forums, dus het is tijd om deze in meer detail uit te leggen. In dit artikel wordt dit probleem behandeld en wordt ook nader bekeken welke optie u moet gebruiken bij het maken van responsieve websites.

Basisdefinities

Laten we definiëren wat we bedoelen als we het hebben over mediaquery's op basis van 'breedte' en 'apparaatbreedte'. De onderstaande citaten komen uit het MDN-artikel over mediaquery's, en er is deze definitie van "breedte":

De omgevingseigenschap "width" beschrijft de breedte van het weergaveoppervlak van het uitvoerapparaat (bijvoorbeeld de breedte van een documentvenster of de breedte van een paginavenster op een printer)

En dit is hoe MDN “apparaatbreedte” definieert:

Beschrijft de breedte van het uitvoerapparaat (dat wil zeggen een volledig scherm of pagina, niet alleen een weergavegebied zoals een documentvenster)

Dus wat betekent dit echt? In eenvoudige bewoordingen verwijzen 'breedte' en 'apparaatbreedte' naar de breedte van het apparaat, niet naar de gehele breedte van de viewport, wat een heel ander concept kan zijn. Het enige waar u om moet geven is de breedte van de viewport, ongeacht de breedte van het apparaat.

Dat gezegd hebbende, is het belangrijkste verschil tussen breedte en apparaatbreedte dat de apparaatbreedte niet altijd overeenkomt met het kijkgebied van een bepaald apparaat.

De meeste tablets en mobiele apparaten hebben niet altijd 1 apparaatpixel per 1 pixel CSS. Je moet bijvoorbeeld weten dat de iPhone 4 een standaard weergavegebied van 640x960 heeft. Dit betekent dat in dit voorbeeld de apparaatbreedte van iPhone4 320x480 is. Het punt is dat Apple begrijpt dat niet elke site responsief is ontworpen en probeert iedereen tevreden te stellen door een breedte van ongeveer 980px aan te bieden om de desktopversie van de site weer te geven. Dit betekent dat als er geen viewport-metatag is, de iPhone4 de site zal weergeven alsof deze 980px breed is, terwijl deze in een 320px breed scherm wordt samengedrukt, waardoor de site kleiner lijkt vanuit het perspectief van de gebruiker.

Laten we beginnen

Om te beginnen moet, net als bij alle dingen die sites responsief maken en mediaquery's gebruiken, de meta review area-tag in een sectie van uw site worden geplaatst. De basisstandaardversie wordt hieronder weergegeven.

Zodra dit fragment op onze pagina verschijnt en we de pagina op verschillende apparaten bekijken, worden er verschillende mediaquery's geactiveerd. Zonder dit zal het bij het bekijken van een pagina op een specifiek apparaat eenvoudigweg verschijnen als een kleinere versie van de pagina; het apparaat zal proberen de hele site in een 320px breed scherm te persen. En dit is niet goed voor u en uw gebruikers! Gebruikers houden er niet van om in te zoomen op een site om de inhoud te zien, en ze willen zeker niet heen en weer scrollen.

Laten we bijvoorbeeld de iPhone 4 nemen, die een standaard viewportbreedte van 980px heeft. Zonder de metatag lopen uw pogingen om mediaquery's te gebruiken op niets uit en krijgt het apparaat geen correcte toegang tot de standaardviewport. De meeste mediaquery's zijn ontworpen voor een grootte van 500 px of minder. Dit wordt meestal gedaan met een eenvoudige mediaquery met maximale breedte. Zonder de metatag heeft u geen effect op dit verzoek, aangezien de iPhone 4 de 980px brede versie van de site blijft weergeven. Laten we naar het onderstaande voorbeeld kijken:

Body ( achtergrond: wit; ) @mediascherm en (min. breedte: 980px) /* Desktop */ ( body ( achtergrond: rood; ) ) @mediascherm en (max. breedte: 979px) /* Tablet */ ( body ( achtergrond: blauw; ) ) @mediascherm en (max. breedte: 500px) /* Mobiel */ ( body ( achtergrond: groen; ) )

Hieronder zijn twee schermafbeeldingen toegevoegd die zijn gemaakt met een iPhone 4. Beide pagina's hebben de bovenstaande CSS, maar de ene gebruikt de meta-viewport-tag en de andere niet.

De hierboven weergegeven pagina bevat geen metatag en als gevolg daarvan wordt de achtergrond rood weergegeven en wordt een standaard 980px brede viewport gesimuleerd, in plaats van een mobiele mediaquery van 500px te gebruiken.

In dit geval is de metatag aanwezig en geeft iOS de pagina correct weer zoals wij dat willen: het is gebaseerd op een breedte van 320px en zorgt ervoor dat onze mediaquery's werken zoals we verwachten.

Waarom kiezen voor apparaatbreedte?

Om eerlijk te zijn impliceert de titel van dit artikel in eerste instantie dat er geen apparaatbreedte wordt gebruikt. Apparaatbreedte heeft echter zijn plaats. Als u een site voor specifieke apparaten maakt, dan moet u inderdaad apparaatbreedte gebruiken.

Vanuit CSS- en RWD-perspectief is een goede site een site die echt ‘apparaat-agnostisch’ is en niet probeert rekening te houden met de breedte van elk afzonderlijk apparaat. Het targeten van specifieke breekpunten voor verschillende apparaattypen (zoals tablets of mobiele telefoons) wordt bereikt door te focussen op hoe inhoud wordt weergegeven op een specifieke viewport-breedte, en vervolgens dienovereenkomstig wijzigingen in de mediaquery aan te brengen. Het is dus niet het apparaat dat de breekpunten dicteert, maar de lay-out en inhoud, en uiteindelijk kan dit tot optimale resultaten leiden, zowel vanuit jouw perspectief als vanuit het perspectief van de gebruiker.

Dit kan de reden zijn waarom zoveel mensen moeite hebben met het maken van responsief ontwerp en waarom ze klagen dat het moeilijk is. Maar als ze proberen te ontwerpen voor individuele apparaten, voeren ze een verloren strijd: het aantal apparaten waarmee rekening moet worden gehouden (om alles te dekken) is te groot en reduceert alles simpelweg tot slechte code. Het is ook de moeite waard te vermelden dat als u besluit apparaatbreedte te gebruiken, u ook aparte regels voor de oriëntatie (staand of liggend) moet opgeven: de apparaatbreedte verandert niet alleen omdat u het apparaat op zijn kant hebt gedraaid. Dit vereist nog meer code, wat nog meer kopzorgen betekent.

Laten we echter eens kijken naar een andere mogelijke optie

Hoe zit het met de “breedte”?

Ik ben, net als veel ervaren ontwikkelaars, van mening dat een volledig responsieve pagina die zich op alle mogelijke schermformaten gedraagt ​​zoals verwacht de gemakkelijkste en meest kosteneffectieve manier is om de meest efficiënte lay-out voor alle apparaten te bereiken.

Om een ​​volledig responsieve en flexibele pagina te maken, moet de ontwikkelaar er eenvoudigweg voor zorgen dat met alle viewports rekening wordt gehouden en dat de pagina indien nodig van structuur en grootte verandert om bij de inhoud en het ontwerp te passen.

Het enige dat u nodig heeft voor een volledig responsieve pagina is een responsieve site en enkele slimme mediaquery's om het standaardbereik van mobiel, tablet, desktop + viewports te targeten. Ik geef er de voorkeur aan om de Media Queries van Foundation te gebruiken, die het meest accuraat zijn en alle vereiste viewports bestrijken.

Natuurlijk is, zoals bij alles in de ontwikkeling, het gebruik van op breedte gebaseerde queries alleen niet de oplossing voor alle lay-outproblemen. Dit is nogal noodzakelijk voor het testen op mobiele apparaten op zoek naar verschillende bugs en weergave-eigenaardigheden. Maar zien hoe alles op verschillende mobiele apparaten wordt weergegeven, is net zo eenvoudig als het formaat van uw browservenster wijzigen.

Voor het testen gebruik ik de Chrome-extensie Responsive Web Design Tester. Hiermee kunt u een specifiek apparaat selecteren. U ziet de apparaatgrootte en hoe uw pagina op dat apparaat wordt weergegeven.

Een ander klein voordeel dat ik wil noemen is dat het gebruik van op breedte gebaseerde zoekopdrachten ervoor zorgt dat toekomstige apparaten de site volledig zullen weergeven. Dit is een behoorlijk veelbelovende aanpak, omdat je je richt op iets globalers (de totale grootte van de viewport) in plaats van op een specifiek apparaat.

Tot slot

Bent u nog steeds van plan apparaatbreedte te gebruiken in mediaquery's? Waren de gepresenteerde argumenten niet overtuigend genoeg? Het gebruik van de normale "breedte" en viewport van het apparaat vereenvoudigt het responsieve ontwerp en is uiteindelijk de beste optie die bijna altijd moet worden gebruikt.

Volledige beschrijving van de metatag kijkvenster en zijn attributen. Voorbeelden, opmerkingen en aanbevelingen voor het aanpassen van een site voor mobiele apparaten. Evenals aanvullende en nuttige metatags: Handheldvriendelijk, Mobielgeoptimaliseerd En Geschikt voor Apple-mobiele web-app.

• Viewport-metatag
  • Viewport-metatagkenmerken
• Aanvullende en nuttige metatags
  • Metatag HandheldFriendly
  • Metatag MobileOptimized
  • Metatag geschikt voor apple-mobile-web-app
• Aanbevolen set metatags

Viewport-metatag

Metatag kijkvenster vertelt de browser precies hoe paginaformaten moeten worden verwerkt en hoe deze moeten worden geschaald. Deze tag moet worden toegevoegd aan het hoofdgedeelte.

Opmerking: metatag kijkpost maakt geen deel uit van een formele standaard en maakt deel uit van de specificatie CSS-apparaataanpassing(http://goo.gl/FSTGbn). Maar totdat deze specificatie definitief is en breed wordt toegepast, wordt aanbevolen de metatag te gebruiken kijkvenster afzonderlijk en in combinatie met stijlen @viewport voor compatibiliteitsdoeleinden.

Voorbeeld:

Viewport-metatagkenmerken

Metatag kijkvenster kan de volgende kenmerken hebben, gescheiden door komma's (,):

breedte- breedte van het kijkgebied.

De attribuutwaarde is een niet-negatief geheel getal van 200 naar 10000 pixels of constante apparaatbreedte, waarmee de paginabreedte wordt aangepast aan de schermgrootte.

Als de waarde niet is opgegeven, is de standaard ingesteld op - in mobiel Safari = 980px, Opera = 850px, Android WebKit = 800px, IE = 974px.

Opmerking: Voor sites met een responsief ontwerp wordt aanbevolen om het volgende te gebruiken: width=device-width .

hoogte- hoogte van het kijkgebied.

De attribuutwaarde is een niet-negatief geheel getal van 233 naar 10000 pixels of constante apparaat-hoogte, waarmee de paginahoogte wordt aangepast aan de schermgrootte.

Opmerking: als attribuut is opgegeven breedte, specificeer attribuut hoogte niet nodig.

initiële schaal- initiële paginaschaal.

0.1 naar 1.0 . Betekenis 1.0 bepaalt de schaal 1:1 , d.w.z. "niet schalen"

Opmerking: op sommige besturingssystemen (iOS, Windows Phone, enz.) De breedte van de pagina blijft, wanneer deze wordt geroteerd, ongewijzigd. In plaats van de inhoud te herdistribueren, wordt deze geschaald. Daarom wordt aanbevolen om te gebruiken: initiële schaal = 1,0.

door de gebruiker schaalbaar- beschikbaarheid van paginaschaling door de gebruiker.

De attribuutwaarde is boolean " Ja"(1) - kan worden geschaald of " Nee"(0) - kan niet worden geschaald.

Opmerking: Het wordt aanbevolen om de waarde " Ja", en omdat het wordt dan standaard geïnstalleerd door de gebruiker schaalbaar mag niet gespecificeerd worden.

minimale schaal- minimale weergavegebiedschaal.

De attribuutwaarde is een getal met een punt van 0.1 naar 1.0 . In de mobiele Safari-browser is de standaardwaarde 0,25. Betekenis 1.0 bepaalt de schaal 1:1 , d.w.z. "niet schalen"

maximale schaal- maximale viewport-schaal.

De attribuutwaarde is een getal met een punt van 0.1 naar 1.0 . Mobiele Safari-browser is standaard ingesteld op 1.6. Betekenis 1.0 bepaalt de schaal 1:1 , d.w.z. "niet schalen"

Opmerking: vermijd attributen door de gebruiker schaalbaar, minimale schaal En maximale schaal, omdat ze hebben een negatief effect op de toegankelijkheid van inhoud.

Aanvullende en nuttige metatags

Metatag Handheldvriendelijk bepaalt of een sitepagina is geoptimaliseerd voor mobiele apparaten op Palm en Blackberry, in een browser zoals AvantGo. Nu wordt het door veel andere mobiele browsers herkend.

Voorbeeld:

Metatag Mobielgeoptimaliseerd(http://goo.gl/ZpLjZz) stelt de breedte van de viewport in mobiele browsers IE Mobile of Pocket IE in. Is analoog aan het attribuut breedte in de metatag kijkvenster.

Voorbeeld:

Metatag Geschikt voor Apple-mobiele web-app(http://goo.gl/VGDYQC) zorgt ervoor dat de pagina op volledig scherm werkt, relevant voor mobiele apparaten van Apple.

Voorbeeld:

De set metatags die ik gebruik voor sites met responsief ontwerp, afgestemd op mobiele apparaten: