Heim > Artikel > Web-Frontend > So passen Sie Bootstrap an den Bildschirm Ihres Mobiltelefons an
So passen Sie Bootstrap an den Bildschirm Ihres Mobiltelefons an
- 尚Original
- 2019-07-18 17:19:083284Durchsuche
Bei Verwendung des Bootstrap-Frameworks gibt es kein Problem mit dem lokalen Debuggen von kleinen Größen. Das Display hat immer noch den Effekt eines großer Bildschirm.
Die Lösung ist eigentlich ganz einfach.
Offizielle Website-Erklärung:
HTML5-Dokumenttyp
Einige von Bootstrap verwendete HTML-Elemente und CSS-Eigenschaften erfordern, dass die Seite auf den HTML5-Dokumenttyp eingestellt ist. Jede Seite in Ihrem Projekt sollte wie folgt formatiert sein.
<!DOCTYPE html> <html lang="zh-CN"> ... </html>
Mobile-first
In Bootstrap 2 haben wir einigen wichtigen Teilen des Frameworks ein mobilfreundliches Design hinzugefügt. Und in Bootstrap 3 haben wir das gesamte Framework so umgeschrieben, dass es von Anfang an mobilfreundlich ist. Diesmal geht es nicht einfach darum, einige optionale Stile für mobile Geräte hinzuzufügen, sondern diese direkt in den Kern des Frameworks zu integrieren. Allerdings ist Bootstrap Mobile-First. Mobilgerätespezifische Stile werden in jede Ecke des Rahmens integriert, anstatt eine zusätzliche Datei hinzuzufügen.
Um eine ordnungsgemäße Zeichnung und Touch-Skalierung sicherzustellen, muss dem 93f0f5c25f18dab9d176bd4f6de5d30e ein Ansichtsfenster-Metadaten-Tag hinzugefügt werden.
<meta name="viewport" content="width=device-width, initial-scale=1">
In mobilen Browsern kann das Zoomen deaktiviert werden, indem das Metaattribut des Ansichtsfensters auf user-scalable=no gesetzt wird. Durch Deaktivieren der Zoomfunktion können Benutzer nur auf dem Bildschirm scrollen, sodass Ihre Website eher wie eine native Anwendung aussieht. Beachten Sie, dass wir diese Methode nicht für alle Websites empfehlen, sie hängt immer noch von Ihrer eigenen Situation ab!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Weitere technische Artikel zu Bootstrap finden Sie in der Spalte Bootstrap-Tutorial, um mehr darüber zu erfahren!
Das obige ist der detaillierte Inhalt vonSo passen Sie Bootstrap an den Bildschirm Ihres Mobiltelefons an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!