Quels appareils bootstrap3 prend-il en charge en premier ?

bootstrap3 donne la priorité à la prise en charge des appareils « mobiles ». Bootstrap3 est un concept de conception axé sur les mobiles. Tous les styles conçus seront appliqués par défaut aux appareils mobiles, puis utiliseront des requêtes multimédias pour ajouter des conceptions pour des appareils d'autres tailles, étape par étape.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version bootsrap 3.3.7, ordinateur DELL G3

Bootstrap 3 est un framework frontal axé sur le mobile. Mobile signifie d'abord que tous les styles conçus seront appliqués par défaut aux appareils mobiles, puis dans la conception, les requêtes multimédias sont utilisées pour ajouter étape par étape des conceptions pour des appareils d'autres tailles.

Dans les versions précédentes de Bootstrap (jusqu'à 2.x), vous deviez référencer manuellement un autre CSS pour rendre l'ensemble du projet adapté aux mobiles.

C'est différent maintenant, le CSS par défaut de Bootstrap 3 lui-même est adapté aux mobiles.

Bootstrap 3 est conçu pour le mobile d'abord, puis pour le bureau. Il s’agit en fait d’un changement très opportun, car de plus en plus d’utilisateurs utilisent désormais des appareils mobiles.

Afin de rendre le site Web développé par Bootstrap adapté aux mobiles et d'assurer une bonne mise à l'échelle du dessin et de l'écran tactile, vous devez ajouter la balise méta viewport dans l'en-tête de la page Web, comme indiqué ci-dessous :

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

• width La propriété contrôle la largeur de l'appareil. En supposant que votre site Web sera consulté par des appareils avec des résolutions d'écran différentes, le définir sur la largeur de l'appareil garantit qu'il s'affichera correctement sur différents appareils. 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 Assurez-vous que lorsque la page Web est chargée, elle sera rendue dans un rapport 1:1 sans aucune mise à l'échelle.

Sur les navigateurs mobiles, vous pouvez désactiver le zoom en ajoutant user-scalable=no à la balise viewport meta. Normalement, maximum-scale=1.0 est utilisé avec user-scalable=no. En désactivant le zoom, les utilisateurs peuvent uniquement faire défiler, 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.0,maximum-scale=1.0, 
user-scalable=no">

🎜Recommander l'apprentissage : "🎜Tutoriel d'utilisation du bootstrap🎜"🎜

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!