Flexible - Viewport 视图

Question

理解

• 简单来说，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
  • 这就很好解释设备物理像素是怎么存在并发挥作用了，当一个固定尺寸屏幕的设备，当存在的 物理像素越多，则越高清