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 lösen Sie das Problem, dass Tomcat9.exe abstürzt
Ein Leser kontaktierte mich und fragte, warum es ...
Verwenden Sie Meta, um den Traffic-Cache zu löschen und die Seite bei jedem Besuch zu aktualisieren, um das Debuggen zu vereinfachen
Code kopieren Der Code lautet wie folgt: <!-- ...
Detaillierter Prozess für den Einstieg mit Docker Compose HelloWorld
Voraussetzungen Compose ist ein Tool zum Orchestr...
Nginx: Lernen, wie man einen Dienst zum Schutz von Datei-Hotlinks erstellt – Beispiel
Vorwort Jeder weiß, dass viele Websites mittlerwe...
Einfaches Webdesign-Konzept – Farbabstimmung
(I) Grundkonzepte der Farbabstimmung auf Webseiten...
XHTML-Tutorial, eine kurze Einführung in die Grundlagen von XHTML
<br />Dieser Artikel gibt Ihnen eine kurze E...
Detaillierte Erklärung zur Verwendung selbstverschachtelter Vue-Baumkomponenten
In diesem Artikel erfahren Sie, wie Sie die selbs...
JavaScript-Beispielcode zum Ermitteln, ob eine Datei vorhanden ist
1. Geschäftsszenario Ich habe kürzlich Entwicklun...
So stellen Sie Tomcat stapelweise mit Ansible bereit
1.1 Aufbau der Verzeichnisstruktur Dieser Vorgang...
JavaScript zum Erzielen des JD.com-Blitzverkaufseffekts
In diesem Artikel wird der spezifische JavaScript...
Einführung in die Verwendung des MySQL mysqladmin-Clients
Inhaltsverzeichnis 1. Überprüfen Sie den Status d...
Reagieren Sie auf die Konstruktionsreihenfolge verschachtelter Komponenten
Inhaltsverzeichnis Auf der offiziellen React-Webs...
HTML-Beispielcode zum Lesen und Anzeigen von Bildern in einem lokalen Ordner
Ein Zweck Wählen Sie auf der HTML-Seite einen lok...
Detaillierte Erklärung des Pufferpools in MySQL
Jeder weiß, dass Daten in MySQL auf die Festplatt...
Tutorial zum Upgrade von Centos7 auf Centos8 (mit Bildern und Text)
Wenn Sie ein Upgrade in einer formalen Umgebung d...