Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to adapt to the mobile phone screen in bootstrap, the article is very detailed, has a certain reference value, interested friends must read it!

When using the Bootstrap framework, it is no problem to debug a small size locally, everything is fine, switch to the phone and open it, it still shows the effect of a large screen.

The solution is actually very simple.

The official website explains:

HTML5 document type

Some of the HTML elements and CSS properties used by Bootstrap require the page to be set to the HTML5 document type. Each page in your project should be set according to the following format.

...

Mobile device priority

In Bootstrap 2, we have added mobile device-friendly styles to some key parts of the framework. In Bootstrap 3, we rewrote the entire framework to make it mobile-friendly from the start. This time, instead of simply adding some optional styles for mobile devices, it is integrated directly into the kernel of the framework. In other words, Bootstrap is a priority for mobile devices. Styles for mobile devices are integrated into every corner of the framework instead of adding an additional file.

To ensure proper painting and touchscreen scaling, you need to add viewport metadata tags to it.

On the mobile device browser, you can disable its zoom (zooming) feature by setting the meta property to user-scalable=no for the viewport (viewport). When zooming is disabled, users can only scroll the screen, which makes your site look more like a native app. Note that we do not recommend the use of all websites in this way, it depends on your own situation!

The above is all the contents of the article "how to adapt to the Mobile screen in bootstrap". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.