Welche Geräte unterstützt Bootstrap3 zuerst?

bootstrap3 priorisiert die Unterstützung für „mobile“ Geräte. Bootstrap3 ist ein Mobile-First-Designkonzept, das standardmäßig auf mobile Geräte angewendet wird und dann mithilfe von Medienabfragen Schritt für Schritt Designs für Geräte anderer Größe hinzufügt.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Bootsrap-Version 3.3.7, DELL G3-Computer

Bootstrap 3 ist ein Mobile-First-Front-End-Framework. „Mobile First“ bedeutet, dass alle entworfenen Stile standardmäßig auf mobile Geräte angewendet werden. Anschließend werden im Design Medienabfragen verwendet, um Schritt für Schritt Designs für Geräte anderer Größen hinzuzufügen.

In früheren Bootstrap-Versionen (bis 2.x) mussten Sie manuell auf ein anderes CSS verweisen, um das gesamte Projekt mobilfreundlich zu machen.

Jetzt ist es anders, das Standard-CSS von Bootstrap 3 selbst ist mobilfreundlich.

Bootstrap 3 ist zuerst auf Mobilgeräte und dann auf Desktops ausgelegt. Dies ist tatsächlich ein sehr zeitgemäßer Wandel, da immer mehr Benutzer mobile Geräte verwenden.

Um die von Bootstrap entwickelte Website mobilfreundlich zu gestalten und eine ordnungsgemäße Darstellung und Skalierung des Touchscreens sicherzustellen, müssen Sie das Viewport-Meta-Tag im Kopf der Webseite hinzufügen, wie unten gezeigt:

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

• width</code > Eigenschaft steuert die Breite des Geräts. Unter der Annahme, dass Ihre Website von Geräten mit unterschiedlichen Bildschirmauflösungen angezeigt wird, stellt die Einstellung auf Gerätebreite sicher, dass sie auf verschiedenen Geräten korrekt gerendert wird. <code>width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。

• initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。

在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。

通常情况下，maximum-scale=1.0 与 user-scalable=no

initial-scale=1.0 Stellen Sie sicher, dass die Webseite beim Laden im Verhältnis 1:1 ohne Skalierung gerendert wird.

In mobilen Browsern können Sie das Zoomen deaktivieren, indem Sie user-scalable=no zum viewport meta-Tag hinzufügen. Normalerweise wird maximum-scale=1.0 zusammen mit user-scalable=no verwendet. Durch Deaktivieren des Zooms können Benutzer nur scrollen, wodurch Ihre Website eher wie eine native App 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.0,maximum-scale=1.0, 
user-scalable=no">

🎜Empfohlenes Lernen: „🎜Tutorial zur Bootstrap-Nutzung🎜“🎜

Das obige ist der detaillierte Inhalt vonWelche Geräte unterstützt Bootstrap3 zuerst?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!