视口（viewport）基础知识

了解视口知识，有助于选择合适的移动端页面适配的方式。

基本名词解释

  • 屏幕尺寸

    表示屏幕对角线的长度，单位为英寸(in)，1英寸等于2.54厘米。例如：iPhone6的屏幕尺寸为4.7英寸。屏幕尺寸参考大全

  • 设备像素DP(device pixels)

    又称物理像素（physical pixel），是显示器设备上的一个物理像素点，系统可以通过控制每个像素点的颜色，使屏幕显示出不同的图像，每个设备的物理像素点是固定的，单位pt。

  • 分辨率

    表示设备屏幕在水平和垂直方向上的物理像素个数。例如，iPhone6的分辨率为750pt * 1334pt。

  • 每英寸像素PPI（pixel per inch）

    每英寸屏幕内有多少个设备像素点（物理像素），即像素密度（pixel density）。PPI的值越高，画质越好，画面越细腻 计算公式为：PPI = （横向像素^2 +纵向像素^2 ）^0.5 /屏幕尺寸。例如：iPhone6的像素密度等于 （750^2 +1334^2 ）^0.5/4.7 = 326。

  • 设备独立像素DIP（device-independent pixel，density-independent pixel）

    也叫密度无关像素，独立于设备的用于逻辑上衡量像素的单位，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用并控制的虚拟像素，然后由相关系统转换为物理像素。

  • CSS 像素

    又称为虚拟像素，设备独立像素的一种，是一种抽象单位，也可以理解为直觉像素。CSS 像素是 Web 编程的概念，指的是 CSS 样式代码中使用的逻辑像素。 CSS像素 = 设备独立像素 = 逻辑像素

  • 设备像素比DPR(device pixel ratio)

    未缩放状态下，设备像素和 CSS 像素的初始比例关系，也可以解释为默认缩放比例。 DPR计算公式：DPR = 设备像素/CSS像素。 可以通过window.devicePixelRatio获取移动设备的像素比。

  • viewport相关的 CSS 单位

    • vw – 视区（视口）宽度百分值，Viewport's Width 简写，1vw 等于 window.innerWidth 的 1%
    • vh – 视区高度百分值，Viewport's Height 简写，1vh 等于 window.innerHeight 的 1%
    • vmin – vw或vh，取小的那个
    • vmax – vw或vh，取大的那个

三个viewport概念

  • 布局视口layout viewport

    表示浏览器默认的viewport，一般情况下这个宽度要大于浏览器可视区域宽度；

    获取方式：document.documentElement.clientWidth/Height可以获取layout viewport的尺寸

  • 可视视口visual viewport

    表示浏览器可视区域的大小，当用户缩小或者放大的时候，尺寸会发生变化。

    获取方式：通过window.innerWidth/Height

  • 理想视口ideal viewport

    最适合移动设备的viewport，它没有一个固定的尺寸，不同的设备拥有有不同的 ideal viewport，它的宽度等于移动设备的屏幕宽度(即设备逻辑像素)

    ideal viewport的宽度 = 屏幕的逻辑像素宽度

    <meta name="viewport" content="width=device-width" />

viewport的meta

移动端常用的viewport设置如下

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

意思是强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览。其中：

  • width：设置布局视口的宽
  • init-scale：设置页面的初始缩放程度
  • minimum-scale：设置了页面最小缩放程度
  • maximum-scale：设置了页面最大缩放程度
  • user-scalable：是否允许用户对页面进行缩放操作

viewport渲染流程

  1. 渲染——将整个页面渲染在一个layout viewport中，以保证页面排版正确。
  2. 缩放——将整个layout viewport缩放到visual viewport大小，以保证页面在手机屏幕上被完整显示出来

参考文章

深入了解viewport和px by 七宝@tgideas

A tale of two viewports — part one by PPK

A tale of two viewports — part two by PPK

Meta viewport by PPK

results matching ""

    No results matching ""