How to adapt bootstrap to mobile phone screen size

Recommended tutorial: Bootstrap tutorial

In order to make the website developed by Bootstrap suitable for mobile devices Friendly, to ensure proper drawing and touch screen scaling, you need to add the viewport meta tag in the head of the web page, as shown below:

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

　width The width attribute controls the width of the device. Assuming that your website will be viewed by devices with different screen resolutions, setting it to device-width will ensure that it renders correctly on different devices.

　initial-scale=1.0 Ensure that when the web page is loaded, it will be rendered at a 1:1 ratio without any scaling.

On mobile browsers, zooming can be disabled by adding user-scalable=no to the viewport meta tag. Function.

Usually, maximum-scale=1.0 is used together with user-scalable=no . By disabling zoom, users can only scroll, making your website look more like a native app.

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

Original article address: https://www.cnblogs.com/wang3680/p/1fba762fb916d0189047085d9e14c117.html

The above is the detailed content of How to adapt bootstrap to mobile phone screen size. For more information, please follow other related articles on the PHP Chinese website!