HTML Meta Viewport Property

What is viewport

The mobile browser is to put the page in a virtual "window" (viewport), usually this virtual "window" (viewport) wider than the screen, so that you do not have to squeeze each page into a very small window (this will destroy the layout of the page without the optimization of the mobile browser), Users can view different parts of a Web page by panning and zooming. The mobile version of Safari has recently introduced the viewport META tag, which allows web developers to control the size and scale of viewport, as well as the basic support of other mobile browsers.

Viewport Foundation

A common viewport meta tag for pages optimized for mobile pages is as follows:

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

Width: Controls the size of the viewport, you can specify a value if 600, or a special value, such as device-width for the width of the device (in pixels of the CSS when scaled to 100%).
Height: corresponds to width, specifying height.
Initial-scale: The initial zoom ratio, which is the scale at which the page is first load.
Maximum-scale: Allows the user to zoom to the maximum scale.
Minimum-scale: The minimum scale to which the user is allowed to zoom.
User-scalable: Whether the user can manually scale

Some questions about the viewport

Viewport is not just a unique attribute on iOS, it also has viewport on Android and Winphone. The problem they are trying to solve is the same, ignoring the true resolution of the device, directly through the DPI, resetting the resolution between the physical size and the browser, which is independent of the resolution of the device. For example, you take a 3.5 inch-320 * 480 Iphone3 GS, 3.5 inch-640 * 960 of iphone4 or 9.7-inch -1024*768 ipad2, although the device resolution is different, the physical size is also different, But you can set viewport to have the same resolution in the browser. For example, your site is 800px wide, and you can set up viewport's width=800 to make your site appear on all three different devices on a full screen.

Viewport some of the differences between iOS and Android.

Online a search about viewport knowledge, basically all is the following information:

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

This code means that the width of the viewport is equal to the real resolution on the physical device and does not allow the user to scale. A mainstream web app is so set, its role is to deliberately discard viewport, do not scale the page, so DPI affirmation and the true resolution of the device is the same, do not do any scaling, the Web page will therefore appear higher and more delicate. The students who play PS should know that when you zoom a picture of 1000 * 1000 directly to 500 * 500, what does it look like? The distortion of the picture must not escape.

But one of the applications I'm going to do is the opposite, using viewport and scaling. Regardless of the actual resolution, regardless of the physical size, I would like to have a unified resolution in the browser, but also do not allow users to zoom. The devices I used to test were: iphone4, ipad2, HTC G11, not knowing what the manufacturer's Aquos phone (Android), Asus Android Pad, Dell's Winphone then I encountered the following problems:

1) If viewport is not displayed, the default width is 980. If all elements of the page are less than 980 wide, width is 980, and width is equal to the maximum width if the page has the widest position over 980. In summary, the default is to display the entire page from left to right. If viewport is set up, for example, only the User-scalable=no is set, for example <meta name= "viewport" content= "User-scalable=no"/> Then the iOS width is still 980 (that is, by default, DPI scaling), but Android and Winphone are no longer scaled, and the browser resolution is the same as the true setting resolution.

2) for iOS devices, setting width can take effect, but for Android, setting width does not take effect. iOS device, the scaling ratio that DPI is automatically calculated by the width you set and set the real resolution, while Android under you set width is invalid, you can set a special field target-densitydpi, About TARGET-DENSITYDPI can refer to this article: http://hi.baidu.com/j_fo/blog/item/748361279ebccd18908f9d7d.html. In other words, there are three variables: browser width, device true width, dpi. Let's simply use a formula to express the relationship between them (not real relationships, simple instructions) device true width * dpi = browser width, here are three variables, device real width is a known value we can not operate, the other two variables we may set one to affect the other, In iOS, we can change the browser width,dpi automatically generated, and in Android, we can change the DPI, browser width automatically generated. For Android, no matter how we set the width, we don't have any effect on the width of the browser.

PS: Here I say another strange question: in the HTC G11 (HTC's phone I only this one, nothing else), if the DPI is set to not display the width, then user-scalable=no does not take effect, that is to say: <meta name= " Viewport "content=" Target-densitydpi=300,user-scalable=no "/>, the user cannot be prevented from scaling the screen. We need to set the width value of the display, only this value on the Android browser resolution screen does not have any impact (on iOS or will have an impact), we still have to set it, and this value must be greater than 320, if less than or equal to 320, It is not possible to make user-scalable=no effective. This issue only appears on HTC's G11 phone, not in Aquos phone. Compatible with Android it's a headache. @[email protected], the future does not know how many pits it. And on the winphone, the result is even more strange: I give viewport width set a value greater than 480, User-scalable=no is invalid, and set a value less than 480, User-scalable=no can take effect. But no matter how much I set the width of the viewport, the true width of winphone does not have the effect I expected, through target-densitydpi. Set width, if less than 480, the screen will zoom, but the scale is not as I expected, I do not know how it is scaled according to the law. It is not known whether this is a winphone issue or a Dell implementation issue.

3) This and the previous should be directly related: The iOS device in the vertical and horizontal screen, will automatically adjust the DPI, whether horizontally or vertically screen, can ensure that the browser width is equal to the value set in the viewport, so when the screen, the page displays the size of the content will be automatically scaled to produce changes. While the Android phone in the screen at the same time, will not change the DPI, in the screen at the same time, the page will not produce zoom. As a result, iOS can guarantee that the horizontal screen page will not produce scroll bars, full screen display, and Android can not guarantee this point, vertical full screen is not full screen, and vice versa.

4) for iOS devices, if the width display is defined and the width of the page is wider than width, the width is not valid and is still displayed at the widest width (no scroll bars). But at this point there will be a very strange problem, when you switch the phone in the same screen a few times, you will find that your page is automatically enlarged, there is a scroll bar, but in fact, the width of the enlargement and you have not related. To prevent this from happening, you need to set the width wide to be larger or the same as the widest part of the page.

HTML Meta Viewport Property