移动端Web系列3 -- viewport

写在前面

• 这里就跳过了文档申明知识的介绍了，这么好的机会还不用html5的，你还在等什么？
• 概念了解： device pixels and css pixels
  
  
  • css像素： 浏览器使用的抽象单位，主要用来在网页上绘制内容
  • 设备像素： 显示屏幕的最小物理单位，每个 dp 包含自己的颜色、亮度
  • css 1px != device 1px
• 概念了解： screen size and window size

viewport

由来

由于手机屏幕相对桌面显示器要小很多，传统网页上的设计在手机上的体验会很糟糕，阅读性非常差。
为了让手机也能获得良好的网页浏览体验，Apple 在移动版 Safari 中定义了 viewport meta 标签(如果没记错最早提出的话)，用于创建一个虚拟窗口（layout viewport），这个虚拟窗口的分辨率接近于桌面显示器，Apple 将其定义为980px。然后将虚拟窗口映射到移动设备的屏幕上，按比例缩放并重新渲染网页。

划分

• 虚拟窗口（layout viewport）
  移动浏览器默认情况下把 viewport 设置为一个比较宽的值（防止太窄而在可视区域中显示错乱）。该默认的 viewport 称为 layout viewport。
  宽度可通过 Js 获取(基本所有设备都支持)

  document.documentElement.clientWidth
  document.documentElement.clientHeight
  

• 视觉窗口（visual viewport）
  浏览器可视区域大小。可理解为手机物理屏幕。

  宽度可通过 Js 获取(不支持Android2, Opera Mini, UC8)

  window.innerWidth
  window.innerHeight
  

• ideal viewport
  由Peter-Paul Koch提出的一种概念，一个完美适配移动设备的 viewport。理想状态是不需要用户缩放和横向滚动条就能正常查看，显示的文字大小合适，不区分分辨率，屏幕密度等。

• meta viewport
  移动端默认使用的是 layout viewport ，而我们想要达到类似 ideal viewport 的效果的话，可以通过 meta 标签来对 viewport 进行控制。

  移动开发中必出场的定义：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  

  用来实现 ideal viewport 的效果。

  meta viewport 标签属性说明

  width: 320 // 设置 layout viewport 的宽度，device-width 为设备宽度
  height: 800 // 和 width 对应，一般很少用
  initial-scale: 1 // 设置页面初始缩放值，
  minimum-scale: 1 // 允许用户的最小缩放值
  maximum-scale: 1 // 允许用户的最大缩放值
  user-scalable: yes/no // 是否允可以手动缩放
  

关于 meta viewport 的各属性还有很多有趣的知识点。视频中可以揭晓~

Tips

• device-width 查询的是设备像素
• 不同浏览器的默认 layout viewport 略有不同
• 事件坐标在移动端各种不兼容
• initial-scale 和 device-width 叠加才能兼容目前的移动设备viewport 匹配
• 缩放值越大，当前 viewport 的宽度就越小，但是，并不是所有设备都能支持 initial-scale=2 的
• 当前缩放值 = ideal viewport 宽度 / visual viewport 宽度
• 当设置宽度值冲突时，浏览器会选择最大值

参考文献

• Mozilla viewport
• Google Developers
• ppk - viewport1
• ppk - viewport2
• ppk - viewport3
• ppk 大神的视频，建议看看。