viewport,html,body在pc和移动的差异

2019独角兽企业重金招聘Python工程师标准>>>

  移动端的页面一般会设置：
<meta name="viewport" content="width=device-width, iuser-scalable=no" />     

pc的页面则不会设置，并且pc的页面在移动端应该也保持样式的稳定，因此不会设置上面的meta标签。移动端的默认viewport为980，实际上屏幕可以显示的宽度大多在1200+以上，即使一个比较宽的页面也不会有滚动条。

不做初始化设置下，html在pc和移动的差异：

    pc中，html，body的宽度始终是页面的宽度

并且随着放大，html和body始终是占满屏幕的宽度的，但是html和body宽度的值变小了，内容被放大。缩小时正好相反。

 

移动端：虚拟宽度默认980，实际宽度一般在1200+以上

1. 当内容区域较小时（即不超过980时）html和body也是占满屏幕的宽度的，与pc端相同。随着放大，html和body开始超出屏幕，出现滚动条，但是html和body宽度的值不变，
2. 当内容宽度较大，超出980时，且未超过屏幕最大容纳宽度（1200+）时，不会出现滚动条，页面宽度以内容区域宽度一致，而html，body的宽度为屏幕的一部分，
3. 当内容宽度很大时，超出屏幕最大容纳宽度（1200+）时，开始出现滚动条，屏幕宽度为最大显示宽度。而html，body的宽度为屏幕的一部分

 

  

参考：http://www.cnblogs.com/yoyoyo/p/3590110.html

转载于:https://my.oschina.net/u/3272730/blog/1595169