首页 > 代码库 > 移动设备中页面缩放的设定
移动设备中页面缩放的设定
使用移动设备浏览网页的时候,会发现有的网页可以缩放,有的不可以。这是为什么呢?
这是因为网页的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之间。
移动设备中页面缩放的设定