Viewport attribute meanings and settings in HTML meta tags

Http://blog.hexu.org/archives/1947.shtml

With the prevalence of high-end mobile phones (andriod,iphone,ipod,winphone, etc.), the development of mobile Internet applications is becoming more and more important, and it is the best choice to develop mobile applications with HTML5. However, each phone has a different resolution, different screen size, how to make our development of the application or page size can be suitable for a variety of high-end mobile phone use it? Learning the use of HTML5 viewport can help you do this ...
Viewport Syntax Introduction:

123456789101112

<!--HTML document --<meta Name="viewport" Content=" height = [Pixel_value | device-height],width = [Pixel_value | device-width],Initial-scale = Float_value,Minimum-scale = Float_value,Maximum-scale = Float_value,user-scalable = [yes | no],target-densitydpi = [Dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]    ">

The viewport attribute of meta tags in web pages is what it means, what it does, and the following is a brief description.

Page viewport: It is set in the page, is to respond to mobile phone mode access to the site, the page to the screen and some of the settings. Usually when the mobile browser opens the page, the page is placed in a virtual "window"-this is larger than the window, that is, you often find that the page can be dragged, zoomed in and small, this window is Viewport,meta this viewport property basic all mobile browser support.
Viewport attributes of each parameter, example:

1	<meta Name="viewport" content="Width=device-width, initial-scale=1.0, Minimum-scale =1.0, maximum-scale=1.0, User-scalable=no ">

123456

width: #viewport width, can be specified as a pixel value, such as: 600, or as a special value, such as: Device-width (width of the device). height: #viewport的高度. initial-scale: #初始缩放比例, that is, the scale at which the browser loads the page for the first time. maximum- Scale: #允许浏览者缩放到的最大比例, generally set to 1.0. minimum- Scale: #允许浏览者缩放到的最小比例, generally set to 1.0. user- Scalable: #浏览者是否可以手动缩放, yes or No.

For mobile browser Browsing page, viewport is often set as follows:

1	<meta name= "Viewport" content= "width=device-width, initial-scale=1." 0 , maximum-scale=1″>

Width is the default width for mobile devices, the initial zoom ratio is 1.0, and the maximum scale is the original pixel size.

TARGET-DENSITYDPI ()
A screen pixel density is determined by the screen resolution, usually defined as the number of dots per inch (dpi). Android supports three screen pixel densities: low pixel density, medium pixel density, high pixel density. A low-pixel-density screen has fewer pixels per inch, while a high-pixel-density screen has more pixels per inch. The default screen for Android browser and webview is medium pixel density.

About WebKit This property is no longer supported, the details are as follows:
Https://lists.webkit.org/pipermail/webkit-dev/2012-June/020914.html
There ' s some concern that target-densitydpi are used by some apps that
is bundled with Android, but folks appear willing to deprecate the
Feature and to migrate those apps to using other mechanisms, such as
Responsive images and CSS device units.

The following is the range of values for the Target-densitydpi property

The device-dpi– uses the original DPI of the device as the target DP. No default scaling occurs.
high-dpi– uses hdpi as the target dpi. Medium pixel density and low pixel density devices are scaled down accordingly.
medium-dpi– uses MDPI as the target dpi. High pixel density devices are scaled accordingly, and pixel density devices are scaled down accordingly. This is the default target density.
LOW-DPI-use MDPI as the target dpi. Medium pixel density and high pixel density devices are scaled accordingly.
– Specify a specific DPI value as the target dpi. The range of this value must be between 70–400.

123456

<!--HTML document --<meta Name="viewport" content="target-densitydpi=device-dpi" /> <meta Name="viewport" content="target-densitydpi=high-dpi" /> <meta Name="viewport" content="target-densitydpi=medium-dpi" /> <meta Name="viewport" content="target-densitydpi=low-dpi" /> <meta Name="viewport" content="target-densitydpi=200" />

To prevent Android browser and WebView from scaling your page based on the pixel density of different screens, you can set the target-densitydpi of viewport to device-dpi. When you do this, the page will not scale. Instead, the page is displayed based on the pixel density of the current screen. In this case, you also need to define the width of the viewport to match the width of the device so that your page will fit on the screen.

Initial-scale
Initial scaling. That is, the initial zoom level of the page. This is a floating-point value, which is a multiplier of the page size. For example, if you set the initial zoom to "1.0", then the Web page will show up at 1:1 of the target density resolution. If you set it to "2.0", the page will be enlarged to twice times.

Maximum-scale
Maximum zoom. That is, the maximum allowable zoom level. This is also a floating-point value that indicates the maximum multiplier of the page size compared to the screen size. For example, if you set this value to "2.0", the page can be up to twice times larger than the target size.

User-scalable
The user adjusts the zoom. That is, whether the user can change the page zoom level. If set to Yes, the user is allowed to change it instead of No. The default value is yes. If you set it to No, then both Minimum-scale and Maximum-scale will be ignored because scaling is not possible at all.

All scaling values must be within the range of the 0.01–10.
Cases:

1234

#设置屏幕宽度为设备宽度, users are not allowed to manually adjust the zoom <meta name="viewport" content="Width=device-width,user-scalable=no" / >#设置屏幕密度为高频, intermediate frequency, low-frequency auto-scaling, prevent users from manually adjusting the zoom <meta name="viewport" content="width=device-width,target-densitydpi=high-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no "/>

Original:
Http://blog.unvs.cn/archives/meta-viewport-tag.html
Http://www.php100.com/html/webkaifa/HTML5/2012/0831/10979.html

Viewport attribute meanings and settings in HTML meta tags