移动设备中页面缩放的设定

使用移动设备浏览网页的时候，会发现有的网页可以缩放，有的不可以。这是为什么呢？

这是因为网页的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之间。

移动设备中页面缩放的设定

原文：http://www.cnblogs.com/fixbug/p/4004494.html