Le bootstrap peut-il être utilisé sur les appareils mobiles ?

Si vous souhaitez en savoir plus sur Bootstrap, vous pouvez cliquer sur : Tutoriel Bootstrap

Bootstrap est actuellement un framework de développement réactif populaire et peut naturellement être utilisé pour le développement mobile. Cependant, si vous souhaitez donner la priorité aux appareils mobiles, vous devez également effectuer certains réglages.

L'environnement bootstrap nécessite au moins 3 fichiers :

Quantitybootstrap.min.css

Quantityjquery.mis.js

Quantitybootstrap.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>

Il est à noter que :

bootstrap.min.css

jquery.mis.js

bootstrap.min.js

L'introduction de ces trois fichiers L'ordre ne doit pas être désordonné Généralement, les deux fichiers

jquery.mis.js

et bootstrap.min.js

sont placés en bas. de la page HTML. La raison en est d'éviter des problèmes inutiles qui peuvent survenir si ces deux fichiers sont chargés avant le chargement de la page Web

Afin de garantir une mise à l'échelle correcte du dessin et de l'écran tactile, vous devez ajoutez-le dans la balise de métadonnées

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

Sur les navigateurs mobiles, le zoom peut être désactivé en définissant l'attribut méta de la fenêtre d'affichage sur user-scalable=no. En désactivant la fonction de zoom, les utilisateurs peuvent uniquement faire défiler l'écran, ce qui donne à votre site Web l'apparence d'une application native. Notez que nous ne recommandons pas cette méthode pour tous les sites web, cela dépend quand même de votre propre situation !

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Supplément :

méta :

width : largeur de la zone visuelle, la valeur peut être un nombre ou un mot-clé device-width

Height : Identique à width

intial-scale : La première fois que la page est affichée est le niveau de zoom de la zone visible. Si la valeur est 1,0, la page. sera affiché en fonction de la taille réelle sans aucune mise à l'échelle

Maximum-scale=1.0, minimum-scale=1.0; Le niveau de zoom de la zone visible,

Maximum-scale est un programme où les utilisateurs peuvent agrandir la page. 1.0 interdira à l'utilisateur d'agrandir la page au-delà de la taille réelle.

évolutif par l'utilisateur : si la page peut être zoomée, aucune mise à l'échelle n'est interdite

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!