<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
The role of meta tags is to allow the current viewport width equal to the width of the device, while not allowing the user to manually zoom. Perhaps you allow the user zooms in different sites have different requirements, but let viewport width equal to the width of the device, this should be the results we all want, if you do not like this set, then it will use that than the screen wide default viewport, that is to say horizontal scroll bar will appear.
The name for the viewport meta tag in the end what things do, what role do they have?
meta viewport tag was introduced in its first safari browser by Apple, the purpose is to solve the problem viewport mobile devices. Later Andrews and major browser vendors have followed suit, introducing support for meta viewport, and also proved that this thing is still very useful.
Apple's specifications, meta viewport has six attributes (for the time being those things is called a content and attribute values), as follows:
| width | Set layout viewport width is a positive integer, or string "width-device" |
| initial-scale | The initial value of the scaling of pages, a number that can be decimals |
| minimum-scale | The minimum scaling value allows the user, a number that can be decimals |
| maximum-scale | Allowing the user maximum scaling value for a number, it may be decimals |
| height | Set layout viewport height, this property is not important to us, rarely used |
| user-scalable | Whether to allow the user to zoom, is "no" or "yes", no representatives are not allowed, yes to allow representatives |
These properties can be used simultaneously, can be used alone or in combination, on the list are separated by commas multiple attributes simultaneously.
In addition, Andrews also supports target-densitydpi this private property, which represents the density level of the target device, css role is to determine how much of the physical pixels on behalf of 1px
| target-densitydpi | Value may be a value or high-dpi, medium-dpi, low-dpi, device-dpi these a string |
Particularly noted that, when the target-densitydpi = device-dpi, css is 1px 1px will equal the physical pixels.
Because this property is only supported by Android, and Andrews has decided to discard target-densitydpi this property, so we have to avoid this property use.
Data from other blog excerpt:
Reprinted from blog http://blog.csdn.net/u012402190/article/details/70172371
viewport of front-end development of mobile in-depth understanding of