Ik gebruik dit meestal:
Hoewel ik zie dat dit vaak wordt aanbevolen:
Dit betekent dat de browser (waarschijnlijk) de breedte van de pagina weergeeft op de breedte van zijn eigen scherm. Dus als dat scherm 320px breed is, zal het browservenster 320px breed zijn, in plaats van ver uitgezoomd en 960px te tonen (of wat dat apparaat standaard doet, in plaats van een responsieve metatag).
Opmerking: gebruik geen responsieve metatag als uw website niet specifiek is ontworpen om responsief te zijn en goed werkt op die grootte, aangezien dit de ervaring erger zal maken.
Er zijn meer kenmerken die deze tag ondersteunt:
| Eigendom | Omschrijving |
|---|---|
| breedte | De breedte van de virtuele viewport van het apparaat. |
| apparaatbreedte | De fysieke breedte van het scherm van het apparaat. |
| hoogte | De hoogte van de "virtuele viewport" van het apparaat. |
| apparaathoogte | De fysieke hoogte van het scherm van het apparaat. |
| initiële schaal | De aanvankelijke zoom bij het bezoeken van de pagina. 1.0 zoomt niet. |
| minimale schaal | Het minimale bedrag dat de bezoeker op de pagina kan inzoomen. 1.0 zoomt niet. |
| maximale schaal | Het maximale aantal dat de bezoeker op de pagina kan inzoomen. 1.0 zoomt niet. |
| schaalbaar door de gebruiker | Hiermee kan het apparaat in- en uitzoomen. Waarden zijn ja of nee. |
Over het algemeen wordt aanbevolen om schalen niet te voorkomen, omdat dat vervelend is en mogelijk een toegankelijkheidsprobleem.
U zult dit waarschijnlijk ook in uw CSS willen hebben:
@-ms-viewport( width: device-width; )Goed om te weten: het wijzigen van de waarde van deze metatag met JavaScript werkt wel, de pagina reageert op de nieuwe waarde. Verwijder de hele tag en vervang of wijzig de contenteigenschap. Geen al te vaak voorkomende behoefte, maar het kan voorkomen.