A mobile-adaptive web page effect solves the problem of small display pages_HTML/Xhtml_Web page production

For work needs, I need to make a web page effect that is adaptive to mobile phones. I finally got it, share it and record it first!

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

Add the following code to the web page, and it will display normally:

Copy code

The code is as follows:

Explanation:

width - the width of the viewport
height - the height of the viewport
initial-scale - the initial scaling ratio
minimum-scale - the minimum scale the user is allowed to zoom to
maximum-scale - the maximum scale the user is allowed to zoom to
user-scalable - whether the user can manually zoom

To simplify things, you can change the above code to the following code, the effect is the same:

Copy code

The code is as follows:

The last thing is not to set the specific width attribute too large. For example, if you set the width attribute of the Body to 1000px on the web page, this will definitely not work, but you can set it to 90%, which is screen adaptive.

PS: I made an effect page, which can be displayed normally on a mobile phone.