Kann Bootstrap auf mobilen Geräten verwendet werden?

Wenn Sie mehr über Bootstrap erfahren möchten, klicken Sie auf: Bootstrap-Tutorial

Bootstrap ist derzeit ein beliebtes responsives Entwicklungsframework und kann natürlich für die mobile Entwicklung verwendet werden. Wenn Sie jedoch mobile Geräte priorisieren möchten, müssen Sie auch einige Einstellungen vornehmen.

Die Bootstrap-Umgebung erfordert mindestens 3 Dateien:

●bootstrap.min.css

●jquery.mis.js

●bootstrap.min.js

<!-- 新 Bootstrap 核心 CSS 文件 -->  
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">  
  
<!-- 可选的Bootstrap主题文件（一般不用引入） -->  
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">  
  
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->  
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>  
  
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->  
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Es ist zu beachten, dass:

bootstrap.min.css

jquery.mis.js

bootstrap.min.js

Die Einführung dieser drei Dateien Die Reihenfolge darf nicht ungeordnet sein Im Allgemeinen werden die beiden Dateien

jquery.mis.js

und bootstrap.min.js

unten platziert Der Grund dafür besteht darin, unnötige Probleme zu vermeiden, die auftreten können, wenn diese beiden Dateien zuerst geladen werden, bevor die Webseite geladen wird.

Um eine ordnungsgemäße Darstellung und Skalierung des Touchscreens sicherzustellen, müssen Sie dies tun Fügen Sie es im Metadaten-Tag 93f0f5c25f18dab9d176bd4f6de5d30e des Ansichtsfensters hinzu.

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

Supplement:

meta:

width: Breite des visuellen Bereichs, der Wert kann eine Zahl oder sein ein Schlüsselwort device-width

Height: Gleich wie width

intial-scale: Das erste Mal, dass die Seite angezeigt wird, ist die Zoomstufe des sichtbaren Bereichs. Wenn der Wert 1,0 ist, ist die Seite wird entsprechend der tatsächlichen Größe ohne Skalierung angezeigt

Maximum-scale=1.0, Minimum-scale=1.0; Die Zoomstufe des sichtbaren Bereichs,

Maximum-scale ist ein Programm, bei dem Benutzer können die Seite vergrößern. 1.0 verhindert, dass der Benutzer die Seite über die tatsächliche Größe hinaus vergrößert.

Benutzerskalierbar: Ob die Seite gezoomt werden kann, keine Skalierung ist verboten

Das obige ist der detaillierte Inhalt vonKann Bootstrap auf mobilen Geräten verwendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!