Jag brukar använda detta:
Även om jag ser att detta rekommenderas mycket:
Detta innebär att webbläsaren (troligen) kommer att göra sidans bredd i bredden på sin egen skärm. Så om skärmen är 320px bred, kommer webbläsarfönstret att vara 320px bredt, snarare än att sättas ut och visa 960px (eller vad den enheten gör som standard istället för en responsiv metatagg).
Obs! Använd inte en responsiv metatagg om din webbplats inte är särskilt utformad för att vara lyhörd och fungerar bra i den storleken, eftersom det kommer att göra upplevelsen värre.
Det finns fler attribut som denna tagg stöder:
| Fast egendom | Beskrivning |
|---|---|
| bredd | Bredden på enhetens virtuella visningsport. |
| enhetsbredd | Den fysiska bredden på enhetens skärm. |
| höjd | Höjden på den "virtuella visningsporten" på enheten. |
| enhetshöjd | Den fysiska höjden på enhetens skärm. |
| initialskala | Den initiala zoomen när du besöker sidan. 1.0 zoomar inte. |
| minsta skala | Det minsta beloppet besökaren kan zooma in på sidan. 1.0 zoomar inte. |
| maximal skala | Det maximala beloppet besökaren kan zooma in på sidan. 1.0 zoomar inte. |
| användarskalbar | Låter enheten zooma in och ut. Värdena är ja eller nej. |
Det rekommenderas generellt att du inte förhindrar skalning, eftersom det är irriterande och potentiellt ett tillgänglighetsproblem.
Du kommer antagligen också vilja ha detta i din CSS:
@-ms-viewport( width: device-width; )Bra att veta: att ändra värdet på denna metatagg med JavaScript fungerar, sidan kommer att reagera på det nya värdet. Antingen ut hela taggen och ersätt eller ändra contentegenskapen. Inte ett mycket vanligt behov, men det kan komma upp.