Responsive Web Design

Viewport meta-tag

Viewport meta-tag

Viewport meta-tag er vigtigt i forhold til opbygning af hjemmesider, der skal tilpasses pc’er, tablets og smartphones. Hjemmesider med Responsive Web Design

Viewport er, som ordet antyder, området man ser på skærmen. Altså det område hjemmesiden vises i, på en hvilken som helst skærmstørrelse og type.  Man kan sige at der er browser-vinduets størrelse.

En smart-phone, tablet eller PC betegnes, indenfor Responsive Webdesign, som enheder eller devices og det er skærmstørrelsen på de forskellige enheder, vi skal tilpasse hjemmesiden efter.

Sådan sætter du et viewport meta-tag ind i HTML koden

I første omgang kan vi gøre det, ved at tilføje et viewport meta-tag i head delen af vores hjemmeside, der tager højde for enhedens skærmstørrelse og opløsning.

Det ser sådan ud:

viewport meta-tag

 

Her har vi sat width til device-width og i de fleste tilfælde er det nok. Andre gange kan man være nødt til også at indsætte flere parametre, fx initial-scale = 1.0, for at sikre at hjemmesiden ikke er zoomet i forhold til standardvisning.

Man kan også sætte flere parametre ind, men de skal bruges forsigtigt da der er nogle parametre, forskellige browser-typer ikke accepterer.

Forklaring af viewport hos W3C

Du kan se en liste over flere parametre til viewport hos W3.ORG, som bestemmer standarder i forhold til hjemmeside-udvikling.  http://dev.w3.org/csswg/css-device-adapt/#viewport-descriptors

Jeg håber du kan bruge gennemgangen af ovenstående til din videre udvikling i webbranchen.