Ich neige dazu, dies zu verwenden:
Obwohl ich sehe, dass dies sehr empfohlen wird:
Dies bedeutet, dass der Browser (wahrscheinlich) die Breite der Seite auf der Breite seines eigenen Bildschirms rendert. Wenn dieser Bildschirm also 320 Pixel breit ist, ist das Browserfenster 320 Pixel breit und nicht verkleinert und zeigt 960 Pixel an (oder was auch immer das Gerät standardmäßig anstelle eines reaktionsfähigen Meta-Tags tut).
Hinweis: Verwenden Sie kein responsives Meta-Tag, wenn Ihre Website nicht speziell auf Responsive ausgelegt ist und bei dieser Größe gut funktioniert, da dies die Erfahrung verschlechtert.
Es gibt weitere Attribute, die dieses Tag unterstützt:
| Eigentum | Beschreibung |
|---|---|
| Breite | Die Breite des virtuellen Ansichtsfensters des Geräts. |
| Gerätebreite | Die physische Breite des Bildschirms des Geräts. |
| Höhe | Die Höhe des „virtuellen Ansichtsfensters“ des Geräts. |
| Gerätehöhe | Die physische Höhe des Bildschirms des Geräts. |
| Anfangsskala | Der anfängliche Zoom beim Besuch der Seite. 1.0 zoomt nicht. |
| Mindestmaßstab | Der Mindestbetrag, um den der Besucher die Seite vergrößern kann. 1.0 zoomt nicht. |
| maximale Skala | Der maximale Betrag, um den der Besucher die Seite vergrößern kann. 1.0 zoomt nicht. |
| vom Benutzer skalierbar | Ermöglicht dem Gerät das Vergrößern und Verkleinern. Werte sind ja oder nein. |
Es wird allgemein empfohlen, die Skalierung nicht zu verhindern, da dies ärgerlich ist und möglicherweise ein Problem mit der Barrierefreiheit darstellt.
Sie werden dies wahrscheinlich auch in Ihrem CSS wollen:
@-ms-viewport( width: device-width; )Gut zu wissen: Das Ändern des Werts dieses Meta-Tags mit JavaScript funktioniert. Die Seite reagiert auf den neuen Wert. Entweder das gesamte Tag herausnehmen und ersetzen oder die contentEigenschaft ändern . Kein sehr häufiges Bedürfnis, aber es kann auftauchen.