Heim > Artikel > Web-Frontend > Wie Bootstrap Browserkompatibilitätsprobleme löst
Wie Bootstrap Browserkompatibilitätsprobleme löst
- 爱喝马黛茶的安东尼Original
- 2019-07-16 17:47:013079Durchsuche
Bootstrap ist das beliebteste HTML-, CSS- und JS-Framework für die Entwicklung responsiver Layout- und Mobile-First-WEB-Projekte.
Bootstrap kommt von Twitter und ist derzeit das beliebteste Frontend-Framework. Bootstrap basiert auf HTML, CSS und JavaScript und ist einfach und flexibel. Während des Entwicklungsprozesses müssen wir nur die entsprechende Klasse zum DOM-Element hinzufügen, um es aufzurufen, was die Webentwicklung beschleunigt.
Lassen Sie uns zum Thema übergehen und über Bootstrap 3-Browser-Kompatibilitätsprobleme und die entsprechenden Lösungen sprechen:
1. Unterstützung für Mobilgeräte
2. PC-Unterstützung
Hinweis: Windows unterstützt IE 8-11.
Detaillierte Unterstützung von Bootstrap 3 in verschiedenen Browsern finden Sie unter Browser-Unterstützung.
Verwandte Empfehlungen: „Bootstrap Getting Started Tutorial“
Wie oben gezeigt, wird IE8 unterstützt. Viele CSS3-Eigenschaften und HTML5-Elemente werden jedoch nicht unterstützt. Das responsive Layout von Bootstrap wird beispielsweise über die Media Query-Funktion von CSS3 implementiert, die je nach Auflösung unterschiedliche Stile abgleicht. Der IE8-Browser unterstützt diese hervorragende CSS3-Funktion nicht. Bootstrap hat in der Entwicklungsdokumentation klar darauf hingewiesen, dass IE8 Respond.js benötigt, um Medienabfragen zu unterstützen. Laut der offiziellen Dokumentation hat der Autor am Ende der HTML-Datei den folgenden Code hinzugefügt
>:<!--[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]-->
Hinweis: Die Datei html5shiv.min.js funktioniert nicht (vollständig) unterstützt HTML5 Der Browser unterstützt HTML5-Tags; die Datei „respond.js“ ermöglicht es IE8, Medienabfragen zu unterstützen.
Als ich die Seite jedoch im IE8-Browser öffnete, stellte ich fest, dass das Kompatibilitätsproblem nicht behoben wurde (Pit, Pit, Pit). Durch Konsultation relevanter Informationen fasst der Autor einige zu beachtende Punkte zusammen (der Schlüssel zum Erreichen des Effekts):
(1) Für das lokale Debuggen ist ein Webserver (z. B. IIS, Apache, Nginx) und einfaches Öffnen erforderlich Die Datei kann den Kompatibilitätseffekt nicht erkennen.
(2) Wenn Sie feststellen, dass „responder.js“ und „Bootstrap“ referenziert wurden, dies jedoch immer noch keine Auswirkungen hat, überprüfen Sie bitte, ob Ihr Bootstrap eine CDN-Datei verwendet >
(3) Bootstrap3 erfordert Html5-Dokumentanweisung (4) Jquery-Version muss unter 2.0 sein. Der Vorlagencode lautet wie folgt:<!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>
Das obige ist der detaillierte Inhalt vonWie Bootstrap Browserkompatibilitätsprobleme löst. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!