移动开发viewport

三种 viewport

  • layout viewport:文档流的 css 宽度,是一个静态的值,使用 document.documentElement.clientWidth 获取,在meta中是 width 设置的值
  • visual viewport:当前可视区的显示的 css 宽度,为文档流现在在屏幕可视区显示出来的宽度,可以使用 window.innerWidth 来获取
  • ideal viewport:移动设备的理想viewport,不同的设备拥有有不同的ideal viewport。所有的iphone的ideal viewport宽度都是320px,无论它的屏幕宽度是320还是640,也就是说,在iphone中,css中的320px就代表iphone屏幕的宽度。

使用 meta 标签对 viewport 进行设置

当 meta 标签的 name 值为 viewport 时 content 里面的值可以对 viewport 进行控制


content 的属性值

  • width:设置layout viewport 的宽度,为一个正整数,或字符串"width-device"
  • initial-scale:设置页面的初始缩放值,为一个数字,可以带小数
  • minimum-scale:允许用户的最小缩放值,为一个数字,可以带小数
  • maximum-scale:允许用户的最大缩放值,为一个数字,可以带小数
  • height:设置layout viewport 的高度,这个属性对我们并不重要,很少使用
  • user-scalable:是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许

content 设置多个属性时候,使用“,”隔开

所以我们常见移动端开发的 meta 为:


把当前的 viewport 宽度设置为 ideal viewport 的宽度

第一中方法:


可以看到通过 width=device-width ,所有浏览器都能把当前的 viewport 宽度变成 ideal viewport 的宽度,但要注意的是,在 iphone 和 ipad 上,无论是竖屏还是横屏,宽度都是竖屏时 ideal viewport 的宽度

第二种方法:


这句代码也能达到和前一句代码一样的效果,也可以把当前的的viewport变为 ideal viewport。

呵呵,傻眼了吧,因为从理论上来讲,这句代码的作用只是不对当前的页面进行缩放,也就是页面本该是多大就是多大。那为什么会有 width=device-width 的效果呢?
要想清楚这件事情,首先你得弄明白这个缩放是相对于什么来缩放的,因为这里的缩放值是1,也就是没缩放,但却达到了 ideal viewport 的效果,所以,那答案就只有一个了,缩放是相对于 ideal viewport来进行缩放的,当对ideal viewport进行100%的缩放,也就是缩放值为1的时候,不就得到了 ideal viewport吗?事实证明,的确是这样的。
但是在 IE 上支持有是横竖屏都等于 ideal viewport 的宽度,所以为了全部都无问题,则设置

综合后的办法


你可能感兴趣的:(移动开发viewport)