Can bootstrap be used on mobile devices?

If you want to know more about Bootstrap, you can click: Bootstrap Tutorial

Bootstrap is currently a popular responsive development framework and can naturally be used for mobile development. However, if you want to prioritize mobile devices, you also need to make some settings.

The bootstrap environment requires at least 3 files:

●bootstrap.min.css

　●jquery.mis.js

●bootstrap.min.js

<!-- 新 Bootstrap 核心 CSS 文件 -->  
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">  
  
<!-- 可选的Bootstrap主题文件（一般不用引入） -->  
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">  
  
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->  
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>  
  
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->  
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

It should be noted that:

Bootstrap.min.css

jquery.mis.js

bootstrap.min.js

Introduction of these three files The order must not be disordered. Generally, the two files

jquery.mis.js

and bootstrap.min.js

are placed at the bottom of the HTML page. The reason for this is to prevent unnecessary problems that may occur if these two files are loaded first before the web page is loaded.

In order to ensure proper drawing and touch screen scaling, you need to add it in viewport metadata tag.

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

On mobile device browsers, you can disable zooming by setting the meta attribute of the viewport to user-scalable=no. By disabling the zoom function, users can only scroll the screen, making your website look more like a native application. Note that we do not recommend this method for all websites, it still depends on your own situation!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Supplement:

meta:

width: width of the visual area, the value can be a number or keyword device-width

Height: Same as width

intial-scale: The first time the page is displayed is the zoom level of the visible area. If the value is 1.0, the page will be displayed according to the actual size without any scaling

Maximum-scale=1.0, minimum-scale=1.0; The zoom level of the visible area,

Maximum-scale is a program that allows users to enlarge the page. 1.0 will prohibit the user from enlarging the page beyond the actual size. .

User-scalable: Whether the page can be scaled, no scaling is prohibited

The above is the detailed content of Can bootstrap be used on mobile devices?. For more information, please follow other related articles on the PHP Chinese website!