Home > Article > Web Front-end > How bootstrap solves browser compatibility issues
How bootstrap solves browser compatibility issues
- 爱喝马黛茶的安东尼Original
- 2019-07-16 17:47:013096browse
Bootstrap is the most popular HTML, CSS and JS framework for developing responsive layout, mobile-first WEB projects.
Bootstrap comes from Twitter and is currently the most popular front-end framework. Bootstrap is based on HTML, CSS, and JavaScript, and it is simple and flexible. During the development process, we only need to add the corresponding class to the DOM element to call it, making Web development faster.
Let’s get into the topic and talk about Bootstrap 3 browser compatibility issues and their corresponding solutions:
1. Mobile device support
2. PC support
Note: Windows supports IE 8-11.
Please refer to Browser Support for detailed support of Bootstrap 3 on various browsers.
Related recommendations: "Bootstrap Getting Started Tutorial"
As shown above, IE8 is supported. However, many CSS3 properties and HTML5 elements are not supported. For example, Bootstrap's responsive layout is implemented through the Media Query function of CSS3, which matches different styles according to different resolutions. IE8 browser does not support this excellent CSS3 feature. Bootstrap has clearly pointed out in the development documentation that IE8 requires Respond.js to support media queries. According to the official documentation, the author added the following code at the bottom of the
tag of the HTML file:<!--[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]-->
Note: The html5shiv.min.js file does not (fully) support html5. The browser supports html5 tags; the respond.js file allows IE8 to support media queries.
However, when I opened the page in the IE8 browser, I found that the compatibility issue had not been resolved (pit, pit, pit). By consulting relevant information, the author summarizes a few points to note (the key to achieving the effect):
(1) Local debugging requires a Web Server (such as IIS, Apache, Nginx), and simply opening the file locally cannot see the compatibility Effect;
(2) If you find that respond.js and Bootstrap have been referenced, but still no effect, please check whether your Bootstrap uses a CDN file;
(3) Bootstrap3 requires Html5 Document statement;
(4) Jquery version needs to be below 2.0.
The template code is as follows:
<!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>
The above is the detailed content of How bootstrap solves browser compatibility issues. For more information, please follow other related articles on the PHP Chinese website!