Comment bootstrap résout les problèmes de compatibilité des navigateurs-Tutoriel d'amorçage-php.cn

Comment bootstrap résout les problèmes de compatibilité des navigateurs

爱喝马黛茶的安东尼

Libérer： 2019-07-16 17:47:01

original

3134 Les gens l'ont consulté

Bootstrap est le framework HTML, CSS et JS le plus populaire pour développer des projets WEB de mise en page réactive et axés sur les mobiles.

Bootstrap vient de Twitter et est actuellement le framework front-end le plus populaire. Bootstrap est basé sur HTML, CSS et JavaScript, et il est simple et flexible. Pendant le processus de développement, il suffit d'ajouter la classe correspondante à l'élément DOM pour l'appeler, ce qui accélère le développement Web.

Comment bootstrap résout les problèmes de compatibilité des navigateurs

Passons au sujet et parlons des problèmes de compatibilité du navigateur Bootstrap 3 et de leurs solutions correspondantes :

Prise en charge des appareils mobiles

Comment bootstrap résout les problèmes de compatibilité des navigateurs

2. Prise en charge des PC

Comment bootstrap résout les problèmes de compatibilité des navigateurs

Remarque : Windows prend en charge IE 8-11.

Veuillez vous référer à la prise en charge des navigateurs pour une prise en charge détaillée de Bootstrap 3 sur différents navigateurs.

Recommandations associées : "

Tutoriel de démarrage de Bootstrap"

Comme indiqué ci-dessus, IE8 est pris en charge. Cependant, de nombreuses propriétés CSS3 et éléments HTML5 ne sont pas pris en charge. Par exemple, la mise en page réactive de Bootstrap est implémentée via la fonction Media Query de CSS3, qui correspond à différents styles selon différentes résolutions. Le navigateur IE8 ne prend pas en charge cette excellente fonctionnalité CSS3. Bootstrap a clairement souligné dans la documentation de développement qu'IE8 nécessite que Respond.js prenne en charge les requêtes multimédias. Selon la documentation officielle, l'auteur a ajouté le code suivant au bas de la balise du fichier HTML :

<!--[if lt IE 9]>
　 <script src="https://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
<![endif]-->

Copier après la connexion

Remarque : le fichier html5shiv.min.js ne contient pas (entièrement ) prend en charge html5. Le navigateur prend en charge les balises html5 ; le fichier respons.js permet à IE8 de prendre en charge les requêtes multimédias.

Cependant, lorsque j'ai ouvert la page dans le navigateur IE8, j'ai constaté que le problème de compatibilité n'avait pas été résolu (pit, pit, pit). En consultant des informations pertinentes, l'auteur résume quelques points à noter (la clé pour obtenir l'effet) :

(1) Le débogage local nécessite un serveur Web (tel que IIS, Apache, Nginx), et simplement l'ouverture le fichier localement ne peut pas voir l'effet de compatibilité ;

(2) Si vous constatez que respons.js et Bootstrap ont été référencés, mais que cela n'a toujours aucun effet, veuillez vérifier si votre Bootstrap utilise un fichier CDN <🎜 ; >

(3) Bootstrap3 nécessite une déclaration de document Html5

(4) La version de Jquery doit être inférieure à 2.0 ;

Le code du modèle est le suivant :

<!DOCTYPE html>
<html>
 
<head>
 <!-- 编码格式 -->
 <meta charset="UTF-8">
 <title></title>
 <!-- 作者 -->
 <meta name="author" content="author">
 <!-- 网页描述 -->
 <meta name="description" content="hello">
 <!-- 关键字使用","分隔 -->
 <meta name="keywords" content="a,b,c">
 <!-- 禁止浏览器从本地机的缓存中调阅页面内容 -->
 <meta http-equiv="Pragma" content="no-cache">
 <!-- 用来防止别人在框架里调用你的页面 -->
 <meta http-equiv="Window-target" content="_top">
 <!-- content的参数有all，none，index，noindex，follow，nofollow，默认是all -->
 <meta name="robots" content="none">
 <!-- 收藏图标 -->
 <link rel="Shortcut Icon" href="favicon.ico" rel="external nofollow" >
 <!-- 网页不会被缓存 -->
 <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
 <!-- 解决部分兼容性问题，如果安装了GCF，则使用GCF来渲染页面，如果未安装GCF，则使用最高版本的IE内核进行渲染。 -->
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <!-- 页面按原比例显示 -->
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="plugin/bootstrap-3.3.0/css/bootstrap.min.css" rel="external nofollow" >
 <!--[if lt IE 9]>
  <script src="https://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
 <![endif]-->
</head>
 
<body>
 
 <script src="plugin/jquery/jquery-1.11.2.min.js"></script>
</body>
 
</html>

Copier après la connexion

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!