Home > Article > Web Front-end > How to adapt bootstrap to mobile phone screen
How to adapt bootstrap to mobile phone screen
- 尚Original
- 2019-07-18 17:19:083331browse
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>
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 93f0f5c25f18dab9d176bd4f6de5d30e.
<meta name="viewport" content="width=device-width, initial-scale=1">
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">
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!