HTML Meta Viewport properties

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

Width	Sets the width of the layout viewport , as a positive integer, or the string "Width-device"
Initial-scale	Sets the initial zoom value of the page, which is a number that can be taken with decimals
Minimum-scale	Allows the user's minimum zoom value to be a number that can be taken with decimals
Maximum-scale	Allows the user's maximum zoom value, which is a number that can be taken with decimals
Height	Sets the height of the layout viewport , which is not important to us and is seldom used
User-scalable	Whether the user is allowed to scale, the value is "no" or "yes", no is not allowed, yes means allow

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.

The above knowledge, I believe that each viewport a little understanding of the students should have already understood. That's not the point I want to talk about today. I would like to explain some of the differences between viewport on 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.

Note: On iphone and ipad, no matter what width you give to viewport, if you don't specify a default scaling value, the iphone and ipad will automatically calculate this scaling value to reach the current page without a horizontal scroll bar (or viewport width is the width of the screen ) for the purpose.

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, that is, 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.

TARGET-DENSITYDPI:TARGET-DENSITYDPI This private property, which represents the density level of the target device, determines how many physical pixels the 1px in the CSS represents.

target-densitydpi

The value can be a number or high-dpi, medium-dpi, low-dpi, device-dpi one of several strings

In particular, when target-densitydpi=device-dpi, 1px in CSS is equal to 1px in physical pixels.

Because this property is only supported by Android, and Android has decided to discard the target-densitydpi attribute, this property should be avoided.

For more detailed information and reference address: http://www.cnblogs.com/2050/p/3877280.html

See the Rainbow after the rain

Source: http://www.cnblogs.com/moqiutao/

If you feel that this article is helpful to your study, please support and encourage more.

HTML Meta Viewport properties