Which devices does bootstrap3 support first?

bootstrap3 gives priority to supporting "mobile" devices. Bootstrap3 is a mobile-first design concept. All designed styles will be applied to mobile devices by default, and then use media queries to add designs for other size devices step by step.

The operating environment of this tutorial: Windows7 system, bootsrap3.3.7 version, DELL G3 computer

Bootstrap 3 is a mobile-first front-end framework . Mobile first means that all styles designed will be applied to mobile devices by default, and then in the design, media queries are used to add designs for other size devices step by step.

In previous Bootstrap versions (until 2.x), you needed to manually reference another CSS to make the entire project mobile-friendly.

It’s different now. Bootstrap 3’s default CSS itself is mobile-friendly.

Bootstrap 3 is designed with mobile first, desktop second. This is actually a very timely shift as more and more users are now using mobile devices.

In order to make the website developed by Bootstrap mobile-friendly and 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 property controls the width of the device. Assuming that your website will be viewed by devices with different screen resolutions, setting it to device-width ensures 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, you can disable zooming by adding user-scalable=no to the viewport meta tag. .

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

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.0,maximum-scale=1.0, 
user-scalable=no">

Recommended study: "bootstrap usage tutorial"

The above is the detailed content of Which devices does bootstrap3 support first?. For more information, please follow other related articles on the PHP Chinese website!