Mobile Web pages, why do you like Width=device-width, and turn off the system zoom feature?

Title, this way of doing mobile Web pages, design is usually designed according to the specifications of 960*640, and then, when the development, usually the size of the inside to reduce the amount of half to develop.

<meta name= "viewport" content= "Width=device-width, initial-scale=1, maximum-scale=1″>

Why not set the width=640 directly and then develop it according to the size of the design?

For the first method, I can think of the benefits for the time being that the picture shrinks by half and I don't know what other reasons are driving people to use Width=device-width

This involves screen size issues with mobile devices (iOS, Android), device-width refers to the physical width of the device, width is the width of the page, this is to be compatible with more devices, of course only through viewport tag is not enough, and you need to work with media query for responsive design.

Here are two articles on viewport that have been translated before, in the hope of helping:
Http://weizhifeng.net/viewports.html
Http://weizhifeng.net/viewports2.html

Add this sentence to the

The phone's screen must have a variety of resolutions if you simply fix dead 640, you won't see the effect of other phone resolutions.

Adaptive Web Design Reference http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html

The resolution of the retina screen such as 960*640, not all screens are retina screens, such as IPHONE3GS resolution is 480*320

In order to make the page in both normal display, so the Retina screen host browser will do some "special action" (such as if you do nothing, just set a width, you will find that the results are unexpected, we suggest you try it in iphone4s, its resolution is just 960*640, But you don't have to add meta-painting a 96*640 div to try it out.

The real reason is that a label adapts to 960*640 and 480*320 and others (such as computers, which sometimes use a computer or ipad to browse the Web)

You can write a JS in the page to calculate the width of the browser rendering, you will find that the iphone browser thinks its width is only 320px

width=device-widththe font size will be suitable for reading. When you visit some websites with your mobile phone, you see the same page as the computer, the font is very small, need to zoom to see, this is not added width=device-width .

If there is no problem with the layout or font, scaling is not necessary.

This article is from the "No Water Fish" blog, please be sure to keep this source http://javaqun.blog.51cto.com/10687700/1725574

Mobile Web pages, why do you like Width=device-width, and turn off the system zoom feature?