移动设备中页面缩放的设定
使用移动设备浏览网页的时候，会发现有的网页可以缩放，有的不可以。这是为什么呢？
这是因为网页的meta中有个属性控制的。
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" name="viewport">
这个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览。
meta中的viewport总共有5个属性，分别如下：
<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– viewport的宽度height– viewport的高度initial-scale– 初始的缩放比例minimum-scale– 允许用户缩放到的最小比例maximum-scale– 允许用户缩放到的最大比例user-scalable– 用户是否可以手动缩放target- densitydpi-声明设备的缩放，默认值medium-dpi，（该属性其它参数具体意义请继续往下看）
延伸知识：
<meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width ">
第一个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
第二个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
第三个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码
第四个meta标签还是上面讲缩放的那个viewport，但这里关注的是target-densitydpi=device-dpi，这是告诉设备1 CSS pixels = 1 device pixels。这个属性有几个可选值
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之间。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
