深入浅出 Viewport 设计原理

Viewport 是 HTML5 针对移动端开发新增的一个 meta 属性, 它的作用是为同一网页在不同设备的呈现,提供响应式解决方案。这篇文章尝试通过循序渐进的方式,逐层探索 Viewport 的设计原理,希望能给读者带来更加清晰、更加全面的技术认知。

一、引言

在PC时代,我们用 css 设置 1px 边框,显示器会用1个物理像素进行渲染。而进入移动应用时代后,我们原来设置1px边框,在手机上可能需要用 2 个或 3 个物理像素来渲染。

那么,手机为什么要这么做?解决了什么问题?以及我们开发过程中需要做什么?

下面,我们将带着这些问题来一步步探索移动端 Viewport 设计原理,以及如何利用 Viewport 进行移动端适配。

二、基础概念

1、屏幕尺寸

屏幕尺寸指的是手机屏幕对角线的长度,知道了屏幕的宽度(width)和高度(height),对角线就可以通过勾股定理算出:

 

然后再把这个长度换算成 “英寸(inch)”,就是我们平时所说的手机尺寸。

1英寸等于 25.4mm,即:

比如 iPhone 常见的尺寸有 3.5寸、4寸、4.7寸、5.5寸 等等。

2、物理像素

我们在手机屏幕上看到的画面,本质上都是由一个个发光的物理像素组成,物理像素是构成屏幕图像的最小单元。

我们常说的屏幕分辨率,就是指这个屏幕上拥有多少个物理像素。

比如: iPhone4 的分辨率是 640 × 960,即屏幕在水平方向上有 640 个像素,在垂直方向上有 960 个像素。

通常,设计师给的 UI 设计稿上的 PX 指的就是物理像素。

3、像素密度 PPI

PPI(Pixel Per Inch by diagonal):表示对角线上每英寸所拥有的像素个数。

计算PPI,可以简单用勾股定理计算出对角线上的像素,再除以对角线长度:

将 iPhone 4 屏幕数据代入公式,即可得出 iPhone4 的 PPI :

PPI 的值越大,每英寸屏幕上的物理像素点就越多越密集,从而渲染出来的画面也更加细腻、清晰。

比如,iphone3GS 和 iphone4 拥有相同大小的屏幕。但前者的分辨率是 320*480,可以算出PPI为 163,而后者的分辨率是 640*960, 其PPI是326。

这就导致 iphone4 在画面呈现上比 iphone3GS 更加清晰和细腻。

4、PPI 导致的问题

我们先看下面这两张图的区别是什么?

 

很明细,左边的图要比右边的看着舒服。

左边的字体大小适中,图片文字都能看的清楚,相比而言,右边的字体就太小了,让用户阅读变得困难。

那么,这个问题是怎么造成的呢?

我们先来做一个对比实验,如下图所示:

左图和右图分别代表两块尺寸相同的屏幕,长度和宽度均为 5cm,屏幕上的每个方格代表一个物理像素点。

唯一不同的是,左边屏幕分辨率为5 × 5,而右边屏幕分辨率为 10 × 10 。

现在屏幕上放了一个按钮,它的 css 样式为:

.button {
 width: 3px;
 height: 1px;
}

从图上的效果可以看出,虽然我们为两个按钮设置了相同的大小,但右屏上的按钮比左屏上的按钮小了很多。

所以我们会发现,相同尺寸的屏幕,像素点越多,每个物理像素点“自身”大小就越小,从而导致渲染出来的图像就会越小。

也就是说,设置相同大小的样式,屏幕的 PPI 越大,渲染出来的图像就越小。

这其实是一个问题。

在移动时代,手机的大小和分辨率参差不齐,从而导致PPI也不尽相同。当我们把一个web页面放到PPI不同的设备上浏览时,就会出现“大小各异”的效果,违背了我们对 css 样式 “所见即所得” 的认知。

为了让同一个元素在所有设备上看起来都差不多大,设备厂商给显示屏幕增加了 “缩放因子”。

5、缩放因子 DPR

这里的缩放因子并不是对图像本身进行缩放,而是使用更多的像素来渲染同一个元素。

如下图所示,同样大小的矩形,在第一个设备上用过了 8×1 个物理像素来渲染,而在第二个设备上用了 16×2 个物理像素来渲染,在第三个设备上则用了 24×3 个物理像素来渲染。

这样以来,同一个元素在所有设备上的显示效果都一样啦。

从图上可以看出,屏幕的PPI越大,缩放因子就越大。如果以第一个屏幕为基准,这三个屏幕的缩放因子分别为 1、2、3。

通常我们把 “缩放因子” 叫做 DPR,DPR 是 device pixel ratio 的缩写,即设备像素比。

这里需要注意的是:

dpr 的大小并不是通过固定公式计算出来的,而是厂商给屏幕设置的一个固定值,出厂时就确定了,它的大小不会随着程序的设置而改变。

6、DPR 和 PPI 的对应关系

不同平台定义 dpr 的基线 PPI 是不同的。

由于第一代 iPhone 的 PPI 是163,所以苹果把 163 作为缩放基线。

因此,在 iPhone 中, PPI=163 是1x 屏,PPI=326 是 2x 屏。

PPI 163 326 401 458
dpr 1 2 3 3
代表机型 iPhone3GS iPhone4 iPhone6P iPhoneX

而 Android 的缩放基线 PPI 是160,所以 PPI=160 是 1x 屏,PPI=320 是 2x 屏。

从图中可以看出: 

dpr 的大小和 PPI 正相关,但不成正比,我们无法通过特定的公式来计算它的大小。

7、逻辑像素和逻辑分辨率

对于同一个元素,dpr 越大,屏幕所需要的物理像素就越多,这是我们上面得出的结论。

那么,在软件程序中,元素的大小到底应该写成多少px?

为了解决这个问题,我们引入了 “逻辑像素” 的概念,即 css 中写的 px 。

所谓逻辑像素,就是它的大小和物理像素不是一一对应的。

假设,我们现在设置一个元素的css样式如下:

.el {
  width: 8px;
  height: 1px;
}

那么,这个元素在不同屏幕上渲染方式是不同的:

  

在 dpr=1 的屏幕上,1个逻辑像素对应1个物理像素。

在 dpr=2 的屏幕上,1个逻辑像素需要对应2个物理像素,才能保证元素同等大小。

同理,在 dpr=3 的屏幕上,1个逻辑像素对应3个物理像素,才能保证元素同等大小。

因此,我们可以得出一个结论:

一个逻辑像素在不同屏幕上所表示的物理像素数是不同的,它的大小和 dpr 一一对应。

有了这个理论,我们就能推导出屏幕的逻辑分辨率,也就是屏幕的 “逻辑宽度” 和 “逻辑高度”。

比如 iPhone6 的物理分辨率为 750 × 1334,dpr = 2, 带入公式就可以得出其逻辑分辨率:

屏幕的逻辑分辨率也可以通过 DOM API 来获取:

// iPhone6
window.screen.width; // 375px
window.screen.height; // 667px;

通常,我们在 CSS 中设置的元素尺寸,本质上都是基于逻辑分辨率进行布局的。

8、iPhone 常见的几种规格

设备 逻辑分辨率(point) 物理分辨率(pixel) 屏幕尺寸 dpr PPI
iPhone 3GS 320 × 480 320 × 480 3.5 1 163
iPhone 4 320 × 480 640 × 960 3.5 2 326
iPhone 5 320 × 568 640 × 1136 4.0 2 326
iPhone 6 375 × 667 750 × 1334 4.7 2 326
iPhone 6 Plus 414 × 736 1080 × 1920 5.5 3 401
iPhone X 375 × 812 1125 × 2436 5.8 3 458
iPhoneXR 414 × 896 828 × 1792 6.1 2 326
iPhoneXS Max 414 × 896 1242 × 2688 6.5 3 458

三、Viewport

1、Viewport 到底是什么?

我们在写H5页面的时候,通常会在 html 的 head 中加入下面这句话:

这句话就是在设置页面的 viewport 。那 viewport 到底是什么?为什么要设置它?

简单来说:viewport 是屏幕背后的一张画布。

下面,我们将逐个理解 viewport 中的每个概念:

2、Viewport 画布

浏览器会先把页面内容绘制到画布上,然后再通过屏幕窗口呈现出来。

画布的宽度可大可小, 当画布的宽度大于屏幕宽度时,画布上的内容就无法通过屏幕全部展示出来,用户可以通过屏幕手势来拖动画布查看被遮挡的部分。

如果没有在 html 中加 viewport 的设置,画布其实也是存在的,浏览器会给画布设置一个默认宽度 ,不同平台的默认值如下:

画布的宽度可以通过 DOM API 来获取:

3、device-width 指的是什么?

device-width 指屏幕可视窗口在水平方向上的逻辑像素。

device-width 的大小可以通过 window.screen.width 来获取:

4、width=device-width 在设置谁的宽度?

width 指的是画布的宽度,device-width 是可视窗口宽度。

width=device-width 就是把画布的宽度设置为可视窗口的宽度,让画布上的内容完全呈现出来。

设置了 width=device-width 之后,画布的宽度就和屏幕的宽度一样大了。

5、画布缩放 - scale

scale 是指画布以 device-width 大小为基准的缩放值。

initial-scale=1.0 也就相当于设置了 width=device-width

通常需要同时设置这两个值,这是因为两者在不同平台有兼容性问题:

在iPhone 和 iPad 上,只支持 inital-scale=1 的设置,而在 IE 只支持width=device-width ,所以两者同时设置可以兼容所有的平台。

6、动态缩放机制

在没有给页面设置 viewport 的情况下,当画布宽度大于可视窗口的时候,浏览器会自动对画布进行缩放,以适配可视窗口大小。这样页面在不滚动的情况下也能呈现全部内容。

下面这个页面是PC端页面,没有做移动端适配,可以看出网页的内容依然可以完全呈现出来,这是因为没有设置 viewport 而触发了 画布的动态缩放机制。

通过 DOM API 能计算出浏览器确实对画布进行了缩放:

需要注意的是:

当没有设置 viewport 或者 设置了viewport 但没有设置 scale 的时候,才会触发浏览器动态缩放机制。

7、禁止动态缩放

给页面添加 viewport 设置,如下所示:

由于手动设置了 scale 的值,没有触发自动缩放机制,浏览器直接把宽度为 980px 的画布原封不动的展示出来了:

这种情况下需要通过滚动才能查看画布全部内容。

8、三个 Viewport

通常,我们把画布称为 layout viewport, 把屏幕可视窗口称为 visual viewport。

而把设置 width=device-width 的画布称为 ideal viewport,即“理想视口”。

我们通常在 html 中设置 viewport 就是为了得到理想视口,方便用户阅览。

四、响应式布局方案

响应式布局的目标是:用同一套代码适配所有的设备。

常用的布局方案有以下几种:

  • 百分比
  • vw
  • Css Media Query
  • rem
  • flex box

下面是手淘团队移动端适配的协作模式:

设计师一般会把 iPhone6(750px) 作为设计稿,设计稿中的元素也都是基于750px进行标注的,当然这里的 px 指的是物理像素。

开发拿到设计稿后,根据iPhone6的 dpr 把标注中的元素大小换算成 css 中的大小,比如设计稿中按钮的宽度标注为40px, 则 css 中应该写成40/2=20px

然后再根据屏幕的逻辑宽度进行同步缩放(如:rem/vw 方案),就可以实现向上或向下适配所有设备。

五、总结

最后,我们再回顾一下开篇提到的问题,其实不难理解,这是由于屏幕的 dpr 不同导致的。

一般情况下,PC 屏幕 dpr 是 1,即 1个逻辑像素 = 1个物理像素,而移动端的 dpr 通常都是 2 或 3,因此也就需要 2个或3个物理像素来渲染。

这也是 “移动端1px边框” 的经典问题,理解了 viewport,这个问题就不难解决了。

原创发布 @一像素 2020

Image placeholder
张宇
未设置
  51人点赞

没有讨论,发表一下自己的看法吧

推荐文章
深入浅出 JSON Web Token

JSONWebToken原理 Web应用可分为客户端和服务端,这两者之间经常需要进行身份认证。 由于HTTP是无状态协议,不能保存认证后的用户状态,因此,每一次发送请求都需要重复的进行认证。 为了

API 系列 - 深入浅出 JSON Web Token

原理Web应用可分为客户端和服务端,这两者之间经常需要进行身份认证。由于HTTP是无状态协议,不能保存认证后的用户状态,因此,每一次发送请求都需要重复的进行认证。为了解决该问题,通常会使用Cookie

深入浅出百亿请求高可用Redis(codis)分布式集群揭秘

摘要:作为noSql中的kv数据库的王者,redis以其高性能,低时延,丰富的数据结构备受开发者青睐,但是由于redis在水平伸缩性上受限,如何做到能够水平扩容,同时对业务无侵入性是很多使用redis

【THE LAST TIME】深入浅出 JavaScript 模块化

前言Thelasttime,Ihavelearned【THELASTTIME】一直是我想写的一个系列,旨在厚积薄发,重温前端。也是对自己的查缺补漏和技术分享。欢迎大家多多评论指点吐槽。系列文章均首发于

​中台战略:业务中台的8个设计原则

业务中台是一个充满生命力的个体,它承载业务逻辑、沉淀业务数据、产生业务价值,并随着业务不断发展进化。它的设计遵循如下图所示的8个原则。业务中台设计的8大原则01 服务松耦合原则(1)面向接口实现这是服

Apache 的架构师们遵循的 30 条设计原则

本文作者叫Srinath,是一位科学家,软件架构师,也是一名在分布式系统上工作的程序员。 他是ApacheAxis2项目的联合创始人,也是ApacheSoftware基金会的成员。 他是WSO2流处理

阿里大佬带你,深入理解线程池底层原理

为什么要使用线程池在实际使用中,线程是很占用系统资源的,如果对线程管理不善很容易导致系统问题。因此,在大多数并发框架中都会使用线程池来管理线程,使用线程池管理线程主要有如下好处:(1)降低资源消耗。通

代码传奇 | 身价10亿的程序员 雷军当年也为他打工——WPS之父 求伯君

他的前半生,值得我们每一个人深思。在普通人眼里,他寂寂无名,只有年岁稍长的文化人,才听说过他传奇般的存在。在IT人眼里,他是块活化石,中国第一的大旗除了他,没人敢抗!他是求伯君,从一个浙江穷山村走出来

Spring WebFlux 的设计及工作原理剖析

前言 Spring5发布有两年了,随Spring5一起发布了一个和SpringWebMvc同级的SpringWebFlux。这是一个支持反应式编程模型的新框架体系。反应式模型区别于传统的MVC最大的不

Jenkins export and import jobs 迁移导出导入任务实践小结

前言我遇到的Jenkins迁移项目并非可以通过简单的物理文件复制就可以轻松解决,需要考虑上千个不同项目的jobs分离,Jenkins1.x和2.x大版本兼容性,JenkinsPlugins插件,Jen

PHP 内核:讲下 PHP 7 底层虚拟机工作原理 —— Zend Virtual Machine 7.2 版本

本文旨在提供Zend虚拟机的概述,如php7所示。这不是一个全面的描述,但我试图涵盖大部分重要部分,以及一些更精细的细节。 此描述针对的是PHP7.2版(目前正在开发中),但几乎所有内容都适用于PHP

MVVM原理(Object.defineProperty和订阅者模式)

想着去了解vue的mvvm数据驱动是怎么实现的,百度中看了这篇文章,demo很好。其他文章只是讲到defineProperty的set,get。彻底理解Vue中的Watcher、Observer、De

如何设计 QQ、微信、微博、Github 等等,第三方账号登陆 ?(附表设计)

前言:多账户登陆1.创业初期用户名密码注册登陆手机号注册登陆2.数据库设计3.引入第三方账户方案4.数据库设计5.总结前言:多账户登陆互联网应用当中,我们的应用会使用多个第三方账号进行登录,比如:网易

react-native中IOS的webview和js层通信 - UIWebview

前言在9012的最后一篇写到了在rn中安卓的webview的通信原理,而作为0202年的第一篇,继续讨论上年rn中webview通信剩下的部分。背景:对于webview,了解过的人都知道在ios端会存

RTSP网络摄像头/海康大华硬盘录像机网页无插件直播方案EasyNVR如何实现RTMP/FLV/HLS/RTSP直播流分发

背景需求对于摄像机直播,客户反馈的最多就是实现web直播、摆脱插件,可以自定义集成等问题。我们熟悉的EasyNVR已经完美的解决了这些问题。然而对于web播放也存在一些问题,通常我们web播放RTMP

Python入门教程_4. 深入 Python 流程控制

除了刚刚介绍的while语句,Python还有一些在其他语言中常见的控制流语句,并做了一些改动。 4.1.if语句 也许最著名的语句是if语句了。 例如: >>>x=int(input("Please

老司机带你深入理解 Laravel 之 Facade

前言 时间真的过的很快啊,今天都2019年12月2号了,准确的说,写这篇博客的时间是晚上21点40分,刚从公司加班回来,洗完澡就坐下来写这篇文章了,不知不觉除这篇博客外,我已经写了11篇了,要讲的东西

深入理解 MySQL—锁、事务与并发控制

本文对MySQL数据库中有关锁、事务及并发控制的知识及其原理做了系统化的介绍和总结,希望帮助读者能更加深刻地理解MySQL中的锁和事务,从而在业务系统开发过程中可以更好地优化与数据库的交互。1.MyS

Java并发编程,深入理解ReentrantLock

ReentrantLock简介ReentrantLock重入锁, 是实现Lock接口的一个类 ,也是在实际编程中使用频率很高的一个锁,支持重入性,表示能够对共享资源能够重复加锁,即当前线程获取该锁再次

来福州,深入了解华为的“数字平台”

   数字化转型已成为几乎所有企业的必经之路,然而在相关战略的制定与真正落地的过程中,企业总是不可避免地会遇到一些困惑与挑战。  企业数字化转型的挑战——尤其对于许多传统行业的企业而言,主要体现在:A

深入了解JavaScript async/await !

Asyncfunctions让我们以async这个关键字开始。它可以被放置在任何函数前面,像下面这样:asyncfunctionf(){ return1; }在函数前面的「async」这个单词表达了一

css Media媒体查询深入介绍

媒介类型在CSS2中,媒体查询只使用于和标签中,以media属性存在media属性用于为不同的媒介类型规定不同的样式screen计算机屏幕(默认值)tty电传打字机以及使用等宽字符网格的类似媒介tv电

深入了解Nodejs Buffer的使用

JavaScript起初为浏览器而设计,没有读取或操作二进制数据流的机制。Buffer类的引入,则让NodeJS拥有操作文件流或网络二进制流的能力。Buffer基本概念Buffer对象的内存分配不是在

深入探究 RocketMQ 事务机制的实现流程,为什么它能做到发送消息零丢失?

1、解决消息丢失的第一个问题:订单系统推送消息领丢失既然我们已经明确了消息在基于MQ传输的过程中可能丢失的几个地方,那么我们接着就得一步一步考虑如何去解决各个环节丢失消息的问题,首先要解决的第一个问题

深入理解JVM - 内存溢出实战

Java堆溢出Java堆用于存储对象实例,只要不断地创建对象,当对象数量到达最大堆的容量限制后就会产生内存溢出异常。最常见的内存溢出就是存在大的容器,而没法回收,比如:Map,List等。出现下面信息