viewport

像素

• 物理像素 (pt)
• 设备独立像素 (px)
• dpr = 物理像素／设备独立像素
• css中的1px并不是代表屏幕上的1px，你分辨率越大，css中1px代表的物理像素就会越多，devicePixelRatio的值也越大。

移动设备上的viewport

• layout viewport
  1.移动端浏览器认为自己必须能让所有网站都正常显示。
  2.如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱。
  3.浏览器就决定 默认情况下 把viewport设为一个较宽的值，比如980px(浏览器之间会有不同)。
  4.可以在meta viewport content="width=..."中设置layout viewport。
  5.浏览器默认的viewport叫做 layout viewport。
  6.获取方式document.documentElement.clientWidth。

• visual viewport
  1.浏览器的可视区域的大小，大小是屏幕中css像素的数量。
  2.缩放会影响visual viewport的大小。
  3.浏览器最大限度地缩小模式时 visual＝layout。
  3.获取方式window.innerWidth。

• 上面两种viewport的不足
  1.这两种都忽视了手机自身的尺寸。
  2.用户可能需要缩放或者横向滚动才能看到全部内容。
  3.字，图可能因为在一个高密度像素的屏幕里显示得太 小而无法看清。

• ideal viewport（最适合移动设备的viewport）
  1.ideal viewport的宽度等于移动设备的屏幕宽度
  2.ideal viewport并没有一个固定的尺寸，不同的设备拥有有不同的ideal viewport。http://viewportsizes.com
  3.意义：ideal viewport 的意义在于，无论在何种分辨率的屏幕下，那些针对ideal viewport 而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户。

• 实现方式
  1.移动设备默认的viewport是layout viewport.
  2.通过设置
  <meta name="viewport" content="width=device-width">
  来实现ideal viewport。
  3.进一步禁止缩放
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">