2016年10月

viewport的一些理解

嗯,在适配移动端页面的时候都会用的的标签

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

viewport的几个属性

  • width:控制 viewport的大小,你可以给它指定一个值,如:600,或者甚至还可以给它一个特殊的值,如:device-widthdevice-width为设备的宽度(单位为缩放为100% 时的 CSS 的像素)
  • height:与 width 相对应,指定viewport 高度
  • initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例
  • maximum-scale:允许用户缩放到的最大比例
  • minimum-scale:允许用户缩放到的最小比例
  • user-scalable:是否允许用户手动缩放

viewport指的是窗口视窗,一般有三种:layout viewport(布局视窗),visual viewport(视觉视窗)和ideal viewport(理想视窗)

- 阅读剩余部分 -