移动端开发基本概念 ：视口 和 分辨率

白青山
949 阅读3分钟

问题引出

在移动端布局中经常会设置一个meta标签属性

<meta name="viewport" 
content="width=device-width,initial-scale=1">

为了深入了解一下这句话的含义，做了相关查询，如下

一、什么是视口（viewport）

视口是当前可见的计算机图形区域，在浏览器中通常与浏览器窗口相同，但不包括浏览器的 UI，菜单栏等——即指你正在浏览的文档的那一部分

  1. viewport的宽度

    文档的 Element.clientWidth 是指一个文档使用 CSS pixels 单位表示的内部宽度, 包括其 padding (不包括 borders, margins 或垂直滚动条，如果有的话）. 这就是 viewport 的宽度

  2. Window.innerWidth 是用 CSS pixels 单位表示的浏览器窗口 viewport 宽度，包括垂直滚动条，如果渲染了的话

  3. innerHeight 和 innerWidth 所组成的区域通常被认为是布局视口(layout viewport) 。浏览器的框架不被认为是 viewport 的一部分.

  4. Web 浏览器包含两个 viewport，布局视口(layout viewport)和视觉视口(visual viewport)。visual viewport 指当前浏览器中可见的部分，并且可以变化。当使用触屏双指缩放，当动态键盘在手机上弹出的时候，或者之前隐藏的地址栏变得可见的时候，visual viewport 缩小了，但是 layout viewport 却保持不变

移动设备的视口

各种不同形状，不同设备像素比的手机。移动设备浏览器的视口是窗口中显示网页信息的区域，不一定与渲染页面大小相同

移动浏览器在虚拟窗口或视口中渲染页面，通常为960px，通常比屏幕宽，然后将渲染结果缩小，以便可以一次看到所有内容，然后，用户可以平移和缩放以查看页面的不同区域。例如，如果移动屏幕的宽度为320像素，则可以使用960像素的虚拟视口渲染网站，然后将其缩小以适合320像素的空间。

为了告诉移动浏览器使用视口宽度而不是默认的960px作为屏幕宽度，开发人员可以包括视口元标记，如下所示

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

width属性控制视口的大小。最好将其设置为device-width，即屏幕宽度，以CSS像素为单位，比例为100％，还有其他属性，包括最大缩放比例，最小缩放比例和用户可缩放比例，这些属性控制用户是否可以放大或缩小页面，但是默认值对于可访问性和用户体验来说是最佳的，因此可以省略

理想布局视口CSS像素个数 = 设备分辨率 / DPR

二、分辨率

设备像素 和 css像素

  • 设备像素（物理像素）

设备像素指的就是设备常说的分辨率。如iPhone6分辨率为750*1334，则iPhone的屏幕横向共有750个物理像素，纵向共有1334个像素。设备的物理像素是不会变的。

  • css像素（逻辑像素）

CSS像素是独立于设备的逻辑像素,前端布局所用的像素就是指的CSS像素。一个CSS像素在屏幕上所占的位置大小不是固定的，和屏幕的缩放有关

  • 设备像素比

DPR在缩放比例为1的情况下： 设备像素比(DPR) = 设备像素个数 / 理想视口CSS像素个数

例如iPhone6的DPR为2, 其分辨率为750 X 1334, 理想视口为375 X 667.

参考文件：

avatar
文章
阅读
粉丝