viewport理解

viewport理解

viewport概念

手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，窗口可大于或小于手机的可视区域，一般手机默认viewport大于可视区域。这样不会破坏没有针对手机浏览器优化的网页的布局，用户可以通过平移和缩放来看网页的其他部分。

下图列出了一些设备上浏览器的默认viewport的宽度。

device-size.png

viewport分类

分类思想来源于PPK的三篇文章 1,2,3

• layout viewport

  可以理解为内容展示所需要实际区域， 通过document.documentElement.clientWidth 来获取

• visual viewport

  用户可视范围，受限于设备，通过window.innerWidth 来获取

• ideal viewport

  在visual viewport基础上添加的概念--移动设备的理想viewport,不需要用户缩放和横向滚动条就能正常的查看网站的所有内容,文字的大小是合适.它没有一个固定的尺寸，不同的设备拥有有不同的ideal viewport。
  不同分辨下的ideal viewport可能一样

viewport控制

Mobile Safari 引入了”viewport元标签“来让web开发者控制视口的尺寸及比例。具体使用meta标签

一个典型的针对移动端优化的站点包含类似下面的内容:


<-meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">


设置参数讲解如下:

viewport-param.jpg

其中，这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。

viewport动态改变

• 方案一

可以使用document.write来动态输出meta viewport标签


document.write('<-meta name="viewport" content="width=device-width,initial-scale=1">')


• 方案二
  通过setAttribute来改变

 
 <-script>
 var mvp = document.getElementById('testViewport');
 mvp.setAttribute('content','width=480');
 <-/script>
 

参考文章

1.移动前端不得不了解的html5 head 头标签

2.MDN:在移动浏览器中使用viewport元标签控制布局

3.屏幕参数理解

4.屏幕尺寸