How to adapt bootstrap to mobile phone screen-Bootstrap Tutorial-php.cn

How to adapt bootstrap to mobile phone screen

尚

Release： 2019-07-18 17:19:08

Original

3407 people have browsed it

How to adapt bootstrap to mobile phone screen

When using the Bootstrap framework, there is no problem with local debugging of small sizes. Everything is normal. Switch to the mobile phone and open it. The display still has the effect of a large screen.

The solution is actually very simple.

Official website explanation:

HTML5 document type

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

<!DOCTYPE html>
<html lang="zh-CN">
...
</html>

Copy after login

Mobile-first

In Bootstrap 2, we’ve added mobile-friendly styling to certain key parts of the framework. And in Bootstrap 3, we rewrote the entire framework to be mobile-friendly from the start. This time it is not simply about adding some optional styles for mobile devices, but directly integrating them into the core of the framework. That said, Bootstrap is mobile-first. Mobile-specific styles are integrated into every corner of the frame, rather than adding an extra file.

To ensure proper drawing and touch scaling, the viewport metadata tag needs to be added to the .

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

Copy after login

On mobile device browsers, the zooming function can be disabled 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">

Copy after login

For more technical articles related to Bootstrap, please visit the Bootstrap Tutorial column to learn!

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