先理解各像素概念
- device pixels，设备像素(逻辑像素，设备独立像素[dip, device independent pixels])，通过
screen.width, screen.height获取；例如iPhone 6，设备分辨率为750*1334，但逻辑分辨率为375*667，水平(垂直)方向上两个物理像素等于一个逻辑像素；devicePixelRatio=物理像素／dp(dip)可用于描述两者关系 - CSS pixels，是一个抽象概念，1像素可以大于也可以小于1dip；例如缩放时将区域放大2倍，那么1css像素就需要原先两倍的设备像素显示
100% zoom指1 css pixel正好等于1dip
At zoom level 100% one CSS pixel is exactly equal to one device pixel.
viewport指人可以观察到的web显示区域，由窗口大小确定；因为不是Document结构，不能使用css控制；整理
screen.width, screen.height，屏幕宽，device pixels衡量window.innerWidth, window.innerHeight，css pixels衡量，表示窗口中可以显示的css pixels数量，因此当缩放时值会改变document.documentElement.clientWidth, document.documentElement.clientHeight，viewportdocument.documentElement.offsetWidth, document.documentElement.offsetHeight，document尺寸
点击事件可以获取三组坐标
e.screenX, e.screenY，相对屏幕的device pixels衡量坐标e.clientX, e.clientY，相对viewport的css pixels衡量坐标e.pageX, e.pageY，相对document的css pixels衡量坐标
media query也有两种衡量方式
width, height，读取viewportdevice-width, device-height，读取screen.width, screen.height
移动浏览器
移动浏览器
在桌面设备中，通常一个物理像素等于一个设备像素(dip)等于一个css像素；移动设备屏幕小，使处理更复杂；为了使狭窄的屏幕正常显示适配桌面设备的页面，引入多个viewport概念
- visual viewport，实际看到的区域，用户可以拖动或缩放查看未显示的区域
- layout viewport，css layout依此计算，例如百分比宽度，比visual layout更大
- ideal viewport，理想大小，例如iPhone 6为
375*667，即使物理像素更大
visual viewport可通过window.innerWidth/innerHeight读取
css在计算布局时使用layout viewport，就好像屏幕比实际的要大，使适配桌面设备的页面也能正确的在移动浏览器上布局；对于同一浏览器，layout viewport是一致的，例如iPhone Safari，无论是宽为375dip的iPhone 6还是414dip的iPhone 6P，通过document.documentElment.clientWidth获取的viewport宽度都是980px
visual viewport和layout viewport都使用css pixels衡量，缩放或旋转屏幕时visual viewport会改变，layout viewport不变
viewport meta tag用于重设layout viewport
处理桌面适配的页面时，许多移动浏览器默认会通过缩放(zoom out)使整个页面能显示，此时layout viewport等于visual viewport，iPhone 6即980px；为了看清缩小的字通常需要通过zoom in操作放大到适当的大小，例如使visual viewport为375px，此时虽然看清了，但因为css layout依赖layout viewport，将有一部分内容移出屏幕
一个解决办法是设置html的宽html { width: 375px; }，这样zoom in后能完整显示整个页面；viewport meta tag可用于简化这样的操作，例如
<meta name="viewport" content="width=375">
重设layout viewport为375px；width可设置任意宽度，甚至device-width，读取device pixels(screen.width)；content设置包括
width，重设layout viewport宽度，可设置固定像素或device-widthinitial-scale，加载时缩放大小maximum-scale, minimum-scale，缩放上下限user-scalable=no，是否支持缩放shrink-to-fit=no，safari 9添加，因为设置width=device-width后浏览器会缩放使超出device-width的内容也能显示；例如为iPhone 6设计页面时宽特意超过375px，safari会缩放使内容能完整显示。可设置关闭默认缩放，使超出部分显示在visual viewport外
示例
<meta name="viewport" content="width=device-width, initial-scale=1">
重设layout viewport为ideal viewport，设置加载时100% zoom，使页面撑满屏幕