viewport grammar Introduction
<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]
"/>
width
control the size of the viewport, a value can be specified or particular values, such as device-width of the device width (in pixels CSS scaled to 100%).
height
and width corresponding to the specified height.
initial-scale
initial scaling. That initial page zoom level. This is a floating-point value is a multiplier page size. For example, if you set the initial scaling "1.0", then, web pages when the show will be to target density resolution of 1: 1 to show. If you set to "2.0", the page will be enlarged to 2 times.
maximum-scale
maximum zoom. That is the maximum allowed zoom level. It is also a floating point value to indicate the maximum multiplier page size compared to the size of the screen. For example, if you set this value to "2.0", the page compared to the target size, up to a factor of 2.
user-scalable
user to adjust the zoom. That is, whether the user can change the page zoom level. If yes is set to allow the user to be changed, otherwise no. The default is yes. If you set it to no, then the minimum-scale and maximum-scale will be ignored, because there can not be scaled.
All scaling values must be within the range of 0.01 to 10.
Example 1: setting screen width is the width of the device, the user manually adjust the zoom prohibit
<meta name = "viewport" content = "width = device-width, user-scalable = no" />
Example 2: setting screen density is high, medium , low-frequency automatic scaling, prohibit users to manually adjust 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"/>
target-densitydpi
a screen pixel density is determined by the screen resolution is usually defined as the number (dpi) dots per inch. Android supports three screen pixel density: low density of pixels, the pixel density, high pixel density. A low pixel density of the screen pixels per inch less, and pixels per inch on a high pixel density screen more. Android Browser and WebView default screen is the pixel density.
device-dpi –使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。
high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。
medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大， 像素密度设备相应缩小。 这是默认的target density.
low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。
dpi-value - 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间
编者注：可惜的是目前手机浏览器已经放弃了target-densitydpi属性
---------------------
作者：杨启盛
来源：CSDN
原文：https://blog.csdn.net/yakson/article/details/52299348
版权声明：本文为博主原创文章，转载请附上博文链接！