A mobile adaptive web page effect solves the small problem of displaying pages

Time:2020-5-19

Work needs, to do a mobile phone adaptive web page effect, finally done, first share and record!

In fact, the main idea is to change the HTML page declaration:

Add the following code to the web page to display it normally:

Copy code

The code is as follows:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0″/>

Explanation:

Width – width of the viewport
Height – the height of the viewport
Initial scale – initial scale
Minimum scale – the minimum scale that users are allowed to zoom to
Maximum scale – the maximum scale that users are allowed to zoom to
User scalable – can the user scale manually

If you want to simplify, you can change the above code to the following code. The effect is the same:

Copy code

The code is as follows:

<meta content=”width=device-width,user-scalable=no” name=”viewport”>

Finally, don’t set too large a specific width attribute. For example, you can set the width attribute of the body to 1000px on the web page, which is definitely not possible, but it can be set to 90%, which is screen adaptive.

PS: I made an effect page, which can be displayed normally with my mobile phone,