首页 > 代码库 > 移动设备中页面缩放的设定

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

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

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

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