So passen Sie Bootstrap an den Bildschirm Ihres Mobiltelefons an-Bootstrap-Tutorial-php.cn

So passen Sie Bootstrap an den Bildschirm Ihres Mobiltelefons an

尚

Freigeben： 2019-07-18 17:19:08

Original

3398 Leute haben es durchsucht

So passen Sie Bootstrap an den Bildschirm Ihres Mobiltelefons an

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>

Nach dem Login kopieren

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 ein Ansichtsfenster-Metadaten-Tag hinzugefügt werden.

<meta name="viewport" content="width=device-width, initial-scale=1">

Nach dem Login kopieren

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">

Nach dem Login kopieren

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!