Viewport-Parameter für mobile Browser (Web-Frontend-Design)
|
Mobile Browser platzieren Webseiten in einem virtuellen „Fenster“ (Ansichtsfenster), das normalerweise breiter als der Bildschirm ist. Auf diese Weise ist es nicht nötig, jede Webseite in ein kleines Fenster zu quetschen (was das Layout von Webseiten zerstören würde, die nicht für mobile Browser optimiert sind). Benutzer können verschiedene Teile der Webseite durch Schwenken und Zoomen anzeigen. Die mobile Version von Safari hat vor kurzem den Viewport-Meta-Tag eingeführt, mit dem Webentwickler die Größe und Skalierung des Ansichtsfensters steuern können. Andere mobile Browser unterstützen dies grundsätzlich auch. Ansichtsfenster-Grundlagen Ein häufig verwendeter Viewport-Meta-Tag für eine für Mobilgeräte optimierte Seite sieht folgendermaßen aus: <Metaname=”Ansichtsfenster” Inhalt=”Breite=Gerätebreite, Anfangsmaßstab=1, Maximalmaßstab=1″> Breite: steuert die Größe des Ansichtsfensters. Sie können einen Wert wie 600 oder einen speziellen Wert wie die Gerätebreite angeben, die die Breite des Geräts angibt (in CSS-Pixeln bei einer Skalierung auf 100 %). Höhe: Gibt die Höhe an, die der Breite entspricht. initial-scale: Das anfängliche Zoomverhältnis, d. h. das Zoomverhältnis beim ersten Laden der Seite. maximum-scale: Der maximale Maßstab, bis zu dem der Benutzer zoomen darf. Mindestmaßstab: Der Mindestmaßstab, auf den der Benutzer zoomen darf. user-scalable: Ob der Benutzer das Bild manuell skalieren kann. Ja oder Nein |
<<: Detaillierte Erläuterung des Prozesses der Verwendung von GPU in Docker
>>: Beispiel für eine adaptive CSS-Bildschirmgrößenimplementierung
Artikel empfehlen
Blog-Design Webdesign-Debüt
Die erste Webseite, die ich entworfen habe, sieht...
Wissen Sie, wie man Mock in einem Vue-Projekt verwendet?
Inhaltsverzeichnis Erster Schritt: Der zweite Sch...
Detaillierte Erklärung zur Verwendung von ES6 Promise
Inhaltsverzeichnis Was ist ein Versprechen? Verwe...
Einführung in die CSS-Stilklassifizierung (Grundkenntnisse)
Klassifizierung von CSS-Stilen 1. Interner Stil -...
Analyse von Multithread-Programmierbeispielen unter Linux
1 Einleitung Die Thread-Technologie wurde bereits...
Mehrere Möglichkeiten zum Berechnen des Alters anhand des Geburtstags in MySQL
Ich habe MySQL vorher nicht sehr oft verwendet un...
Detaillierte Erläuterung der Nginx-Statusüberwachung und Protokollanalyse
1. Nginx-Statusüberwachung Nginx bietet eine inte...
Tiefgreifendes Verständnis der Verwendung von r2dbc in MySQL
Einführung MySQL sollte eine sehr häufig verwende...
So übermitteln Sie den Wert eines deaktivierten Formularfelds in einem Formular Beispielcode
Wenn ein Formularfeld in einem Formular deaktivier...
Countdown-Effekt mit Javascript implementieren
Verwenden Sie Javascript, um den Countdown-Effekt...
MySQL verwendet inet_aton und inet_ntoa, um IP-Adressdaten zu verarbeiten
Dieser Artikel stellt vor, wie Sie IP-Adressdaten...
JavaScript zum Erzielen eines Dropdown-Menüeffekts
Verwenden Sie Javascript, um ein Dropdown-Menü zu...
Erfahren Sie schnell, wie Sie mit der Vuex-Statusverwaltung in Vue3.0 beginnen
Vuex ist ein speziell für Vue.js-Anwendungen entw...
Lösung zum Vergessen des MySQL-Datenbankkennworts unter MAC
Schnelle Lösung zum Vergessen des MySQL-Datenbank...
Detaillierte Erläuterung des Prozesses, mit dem Nginx die echte Quell-IP erhält, nachdem mehrere Proxy-Ebenen durchlaufen wurden
Frage Nginx nimmt $remote_addr als echte IP-Adres...