两个视口

视觉视口：是当前显示屏页面中的一部分
布局视口：完整页面的大小

视觉视口

布局视口有多宽？这因浏览器而异。Safari iPhone使用980px， Opera 850px, Android WebKit 800px, IE 974px

视觉视口和布局视口相同

局视口宽度总是相同的。如果你旋转你的手机，可视视口会改变，但是浏览器会通过稍微放大来适应这个新的方向，这样布局视口就会再次和可视视口一样宽

测量布局视口

document.documentElement.clientWidth/clientHeight，测量布局视口尺寸

测量布局视口

测量视觉视口

window.innerWidth/innerHeight，测量视觉视口尺寸，当用户缩放时，该值会变化

视觉视口

不幸的是，这是一个不兼容的领域；许多浏览器仍然需要添加对可视视口测量的支持。

滚动偏移

window.pageX/YOffset，和桌面端一样

媒体查询

媒体查询和桌面端一样

Meta viewport

<meta name="viewport" content="width=320">

width，设置布局视口的宽度，有一个特殊的值：device-width。它将布局视口宽度设置为理想视口宽度
initial-scale，设置页面的初始缩放和布局视窗的宽度
minimum-scale，设置最小缩放级别（即用户可以缩小多少）
maximum-scale，设置最大缩放级别（即用户可以放大多少）。
height，应该设置布局视窗的高度
user-scalable，是否阻止用户缩放

假设您构建了一个简单的页面，并且元素没有宽度。现在它们伸展到布局视窗宽度的100%。大多数浏览器会缩小屏幕以显示整个布局视口，产生如下效果

所有用户都会立即放大，这是可行的，但大多数浏览器保持元素的宽度不变，这使得文本难以阅读。

理想视口

它提供了设备上网页的理想大小。因此，理想视口的尺寸因设备而异
在带有非视网膜屏幕的旧设备或廉价设备上，理想的视口等于物理像素数，但这不是必需的。具有更高物理像素密度的新设备可能会保留旧的理想视口，因为它非常适合设备

直到iPhone 4S， iPhone理想的视口是320x480，不管它是否有固定屏幕。这是因为320x480是iphone上网页的理想尺寸

布局视口可以设置为理想的视口值width=device-width和initial-scale=1设置就可以

所有的缩放指令都是相对于理想视口的，而不是布局视口的宽度。所以maximum-scale=3意味着最大变焦是理想视口的300%