Maison >interface Web >Tutoriel d'amorçage >Comment adapter le bootstrap à l'écran du téléphone mobile
Comment adapter le bootstrap à l'écran du téléphone mobile
- 尚original
- 2019-07-18 17:19:083394parcourir
Lors de l'utilisation du framework Bootstrap, il n'y a aucun problème de débogage local de petites tailles. Tout est normal. Passez au téléphone mobile et ouvrez-le. grand écran.
La solution est en réalité très simple.
Explication officielle du site :
Type de document HTML5
Certains éléments HTML et propriétés CSS utilisés par Bootstrap nécessitent que la page soit définie sur le type de document HTML5. Chaque page de votre projet doit être formatée selon les éléments suivants.
<!DOCTYPE html> <html lang="zh-CN"> ... </html>
Mobile-first
Dans Bootstrap 2, nous avons ajouté un style adapté aux mobiles à certains éléments clés du framework. Et dans Bootstrap 3, nous avons réécrit l’intégralité du framework pour qu’il soit adapté aux mobiles dès le départ. Cette fois, il ne s’agit pas simplement d’ajouter quelques styles optionnels pour les appareils mobiles, mais de les intégrer directement au cœur du framework. Cela dit, Bootstrap est avant tout mobile. Les styles spécifiques aux mobiles sont intégrés dans chaque coin du cadre, plutôt que d'ajouter un fichier supplémentaire.
Pour garantir un dessin et une mise à l'échelle tactile appropriés, une balise de métadonnées de fenêtre doit être ajoutée au fichier 93f0f5c25f18dab9d176bd4f6de5d30e
<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">
Pour des articles plus techniques liés à Bootstrap, veuillez visiter la colonne Tutoriel Bootstrap pour apprendre !
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!