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
So installieren und deinstallieren Sie open-vswitch unter Linux
1. Kompilieren und installieren Sie OVS aus dem Q...
Erläuterung der Linux-Kernel-Optimierungskonfiguration für hochparallele Nginx-Server
Da die Standardparameter des Linux-Kernels auf de...
So ändern Sie Flash-SWF-Dateien in Webseiten
Ich denke, dies ist ein Problem, auf das viele Leu...
JavaScript-Countdown zum Schließen von Anzeigen
Verwenden von Javascript zum Implementieren eines...
Beispielanalyse zum Exportieren, Importieren und Kopieren von Docker-Images
Die erste Lösung besteht darin, das Bild in ein ö...
Beispiel für die Verwendung der setInterval-Funktion in React
Dieser Artikel basiert auf der Windows 10-Systemu...
Eine kurze Diskussion über Shallow Copy und Deep Copy in JavaScript
Inhaltsverzeichnis 1. Direkte Zuordnung 2. Oberfl...
Vue setzt die Daten auf ihren ursprünglichen Zustand zurück
In einigen Fällen müssen die Daten in den Daten w...
Detaillierte Erläuterung der MySQL-Installation und der neuen Kennwortauthentifizierungsmethode in MySQL 8.0
1. Einleitung Oracle hat MySQL 8.0GA veröffentlic...
Allgemeine Überlegungen zum Erstellen eines Hadoop 3.2.0-Clusters
Ein Port ändert sich In Version 3.2.0 beträgt der...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.17
Dieser Artikel enthält das grafische Tutorial zur...
Reagieren Sie mit Beispielcode zur Implementierung des Anmeldeformulars
Als Vue-Benutzer ist es an der Zeit, React zu erw...
Der praktische Prozess des Login-Status-Managements im vuex-Projekt
Inhaltsverzeichnis Werkzeug: Anmeldeszenario: übe...
Lösung für das Problem des Sitzungsfehlers, der durch den Nginx-Reverse-Proxy verursacht wird
Ein Kollege bat um Hilfe: Die Anmeldung beim Back...
Detaillierte Erläuterung des Prozesses zur Behebung der Ursache für hohe CPU-Auslastung unter Linux
Inhaltsverzeichnis Vorwort Start Schritt Fehlerbe...