Viewport 视图
理解
- 简单来说，viewport 相当于浏览器的窗口，在pc浏览器中，viewport就是浏览器的窗口宽高
- 然而，viewport 在移动端中，提供了两个 viewport:虚拟的
visualviewport可视视窗和布局的layoutviewport布局视窗
- 下面这一段来自官方：
- 视窗即：用户的网页可见区域，因设备的不同，在手机上比在pc上会小；
- 在移动设备还没流行之前，网页设计都只关注 pc 屏幕的设置，因此，一般的网页都是固定的；
- 然而，在移动设备上显示行不通。因为实在太大的，因此，网页都是缩放了来适应移动设备的屏幕（不管页面有多宽，全都缩到一起显示）；
- 不同设备，默认的 viewport 大小都不一致，如 iphone 的 viewport 最小为 980，当页面的宽度总体大于 980，则会显示滚动条；
- 显示这解决了问题，但根本不完美，viewport 的 h5 设计就是用来解决这些问题的
<meta name="viewport" content="width=device-width, initial-scale=1.0">- 上面这个 meta 标签告诉浏览器如何控制页面的尺寸和缩放，如果没有这个 meta，移动端的浏览器会将整个页面，缩放到一块。
- 当用户可以在垂直方向上滚动页面（而非水平），则为良好的用户体验，反之，则带会带来糟糕的体验
- 有几条规则需要注意:
- 不要使用固定过长宽度的元素，这样会撑开页面，导致滚动条的出现
- 不要让内容依赖于
特定宽度的 viewport 进行渲染，不同设备的 css 像素变化很大，依赖于固定宽度的 viewport 进行渲染是不可靠的
- 使用CSS媒体查询为为不同屏幕应用不同的样式 - 设置较大的绝对CSS宽度将导致元素对于较小设备上的 viewport 太宽，相反，请考虑使用相对宽度值，例如宽度：100％。
- 请小心使用较大的绝对定位值。 它可能会导致元素落在小设备上的视口之外。
- 有几个概念需要被提及
- visual viewport 可见视口 屏幕宽度
- layout viewport 布局视口 DOM宽度
- ideal viewport 理想适口：使布局视口就是可见视口
像素的理解
- css 像素
- Css 中的一像素往往对应着 pc 屏幕的一个物理像素。但事实上，Css 中的像素往往是抽象的
- 在不同设备不同环境中，css 1px 并不代表一个物理像素，如 Retina 屏
- 设备独立像素
- 密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)，然后由相关系统转换为物理像素。
- 重要的是：点，点代表一个程序可以使用的虚拟像素，如 css 像素
- 设备物理像素
- 设备物理像素相当于真正发光、渲染的物理部件。在 Retina 屏中，设备物理像素是大于设备独立像素的，如2倍，3倍
- 在 Retina 屏（或高分屏）中，使用多个物理像素代表一个 css 像素
- devicePixelRatio
- devicePixelRatio = 设备物理像素/设备独立像素
- 如一个5英寸的设备，当它的设备独立像素为360px，而物理像素为 720px，则此时 devicePixedRatio 为 2
- 当它的设备独立像素为360px，而物理像素为 1080px，则此时 devicePixedRatio 为 3
- 这就很好解释设备物理像素是怎么存在并发挥作用了，当一个固定尺寸屏幕的设备，当存在的 物理像素越多，则越高清