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
React-Internationalisierung – Verwendung von react-intl
Wie erreicht man Internationalisierung in React? ...
MySQL-Wissenspunkte und häufig verwendete MySQL-Befehle für die Computerprüfung der zweiten Ebene
Die Grundlagen der MySQL-Wissenspunkte für die Co...
Detaillierte Erläuterung des Lesevorgangs für Nginx-Anforderungsheaderdaten
Im vorherigen Artikel haben wir erklärt, wie ngin...
Lösung für den Überlauf der HTML-Tabelle
Wenn die Tabelle breit ist, kann es zu einem Über...
Passen Sie den Stil des Elements <input type="file"> an, das beim Hochladen von Dateien in HTML verwendet wird
Auf einer Webseite wird das Element <input typ...
Detaillierte Erläuterung des virtuellen DOM in der Vue-Quellcodeanalyse
Warum brauchen wir virtuellen Dom? Virtual DOM wu...
Dreißig HTML-Codierungsrichtlinien für Anfänger
1. HTML-Tags immer schließen Im Quellcode der vor...
Der derzeit bessere Weg, eine Auswahlliste mit allen Optionen zu erstellen, wenn diese ausgewählt/fokussiert sind
Während der Entwicklung bin ich auf eine solche An...
Lösung für das Problem der MySQL-Transaktionsparallelität
Ich bin während der Entwicklung auf ein solches P...
Ideen und Methoden zur inkrementellen Sicherung einer MySQL-Datenbank
Um eine inkrementelle Sicherung der MySQL-Datenba...
Tutorial zur Bereitstellung und Installation von MySQL 8.0.18 unter Windows 7
1. Vorbereitende Schritte (Windows 7 + MySQL-8.0....
VMware15/16 Detaillierte Schritte zum Entsperren von VMware und Installieren von MacOS
VMware-Version: VMware-Workstation-Full-16 VMware...
Schritte zum Verpacken und Bereitstellen des Vue-Projekts auf dem Apache-Server
In der Entwicklungsumgebung wird das Vue-Projekt ...
Lösung zum Ändern des Datenspeicherorts der Datenbank in MySQL 5.7
Da die in der MySQL-Datenbank gespeicherten Daten...
Detaillierte Erklärung des Vue3-Sandbox-Mechanismus
Inhaltsverzeichnis Vorwort Browser kompilierte Ve...