How to automatically adapt the width of a mobile phone screen

<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, User-scalable=yes "/>

　　

Add these words to the

which

Width=device-width: Indicates width is the width of the device screen

initial-scale=1.0: Indicates the initial zoom ratio

minimum-scale=0.5: Represents the minimum zoom ratio

Maximum-scale=2.0: Represents the maximum zoom ratio

User-scalable=yes: Indicates whether the user can adjust the zoom ratio

If you want to open a webpage, it is automatically displayed at the original scale, and the user is not allowed to modify it:

<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no "/>  

In this way, you can set the width of some of the images, such as header banners, to style= "width:100%", and the entire page looks like a full screen on the device.

Original address: http://blog.csdn.net/dier4836/article/details/7533879

How to automatically adapt the width of a mobile phone screen