移动web开发之视口viewport

本文基于http://www.cnblogs.com/xiaohuochai/p/5496995.html，在该文的基础下，进行整理。

在桌面上，视口的宽度和浏览器窗口的宽度一致。而在移动端，视口分为布局视口(layout viewport)、视觉视口(visual viewport)和理想视口(ideal viewport)。

布局视口

为了容纳为桌面浏览器设计的网站，移动设备默认的布局视口宽度远大于屏幕的宽度，设置为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。document.documentElement.clientWidth/Height返回的是布局视口的尺寸

视觉视口

视觉视口是用户正在看到的网站的区域，对于的javascript属性是window.innerWidth/Height

缩放会影响视觉视口的大小。当缩放程度是100%时，视觉视口与设备屏幕一样宽。放大使视觉视口变得更小，因为屏幕上显示的CSS像素更小了，而缩小会让视觉视口更大，因为屏幕上的CSS像素更多了。因此缩放程度和视觉视口的大小是逆相关的：放得越大，视觉视口越小　

[注意]当用户缩放时，只有视觉视口的尺寸会发生改变，布局视口不会改变。移动端的缩放不会导致CSS布局被重新计算。

//以下代码表示3秒后，页面缩放从100%到200%

<script>
test.innerHTML = '屏幕宽度:' + screen.width + '
视觉视口:' + window.innerWidth;
setTimeout(function(){
    var meta = document.getElementsByTagName('meta')[1];
    meta.setAttribute('content','initial-scale=2');
    test.innerHTML = '屏幕宽度:' + screen.width + '
视觉视口:' + window.innerWidth;
},3000);
script>

理想视口

布局视口的默认宽度并不是一个理想的宽度。这就是为什么苹果和其他效仿苹果的浏览器厂商，会引进理想视口。它是对设备来说，最理想的布局视口尺寸。显示在理想视口中的网站拥有最理想的浏览和阅读的宽度，用户刚进入页面时也不再需要缩放

只有主动地往页面里添加meta视口标签时理想视口才会生效。如果没有meta视口标签声明，那么布局视口将会维持它的默认宽度，理想视口只有当显式地使用它的时候才会产生影响

//这一行代码告诉浏览器，布局视口的宽度应该与理想视口的宽度一致
"device" content="width=device-width">

定义理想视口是浏览器的工作，而不是设备或操作系统的工作。

screen.width/height返回是理想视口的尺寸

　[注意]当设备方向改变时，iphone中理想视口screen.width/height的值并不会改变，但安卓设备会改变。而布局视口document.documentElement.clientWidth和视觉视口window.innerWidth的值，苹果和安卓都会改变

meta视口

meta视口标签存在的主要目的是让布局视口的尺寸和理想视口的尺寸匹配。

meta视口标签应该被放在HTML文档的中，并且按以下格式书写:

"viewport" content="name=value,name=value">

　　每一个名/值对都是一个给浏览器发号命令的指令。它们被逗号分隔，共有6个

　　1、width:设置布局视口的宽度为特定的值
　　2、initial-scale:设置页面的初始缩放程度和布局视口的宽度
　　3、minimum-scale:设置了最小缩放程度(用户可缩小的程度)
　　4、maximum-scale:设置了最大缩放程度(用户可放大的程度)
　　5、user-scalable:是否阻止用户进行缩放
　　6、height:设置布局视口的高度(未被实现)

【1】把布局视口的尺寸设为一个理想的值

"viewport" content="width=device-width">

initial-scale

　　initial-scale指令设置了页面的初始缩放程度。1代表100%，2代表200%。缩放程度是根据理想视口来计算的

当前缩放值 = 理想视口宽度  / 视觉视口宽度

　缩放程度与视觉视口的宽度是逆相关的，越高的缩放程度意味着视觉视口越小。所以initial-scale=1时视觉视口尺寸和理想视口尺寸是一样的。initial-scale=2会放大到200%，因此视觉视口的高宽是理想视口的一半

【1】width=device-width,initial-scale=1

　　IE10中当initial-scale为1时，它在横屏模式下宽度保持着320px，但width=device-width时它会从320px变为480px

　　所以为了在所有浏览器上解决这个问题，需要使用

"viewport" content="width=device-width,initial-scale=1">

总结

　　在桌面浏览器中，浏览器窗口就是约束CSS布局的视口。而在手机端，布局视口会限制CSS布局；视觉视口表示浏览器的可视区域，决定用户看到什么；理想视口是对于特定设备的特定浏览器的布局视口的一个理想尺寸