网页开发-视窗(一)

990 阅读7分钟

这个系列会介绍分辨率、逻辑像素、设备像素、窗口和viewports等对网页开发的影响。把它们放在一起是因为这些概念是互相关联影响的,原谅我找不到一个好的词汇去概括这这些概念,所以先用“视窗”这个词吧。

设备像素、css像素和 devicePixelRatio

我们得首先来了解网页开发中关于像素的一些概念,这是这个系列的底。

设备像素(Device Pixel)也叫实际像素是个直观的概念,电脑显示器的分辨率是多少,就拥有多少个设备像素。比如,在从事pc网页设计的时候,设计师一般会以1920*1080的分辨率为基准进行设计,这也是我们常见的24寸显示器的分辨率,这代表着24寸的显示器上面,宽有1920个像素点,高有1080个像素点,总共就有1920*1080 = 2,073,600 个像素点。我们可以通过 screen.widthscreen.height 获取到设备分辨率。

对于开发人员来说,也很直观,如果我写一个 width:1920px 的元素,那么这个元素就会占满整个屏幕的宽。

有个问题来了,人们不满足于24寸的显示只有1080p的显示分辨率,直接把它翻倍了,变成了 3840 * 2160(我们俗称的4K),24寸的设备拥有的像素点变成了原来的4倍。如果还是按照 css上标注的 px 数去渲染网页的话,原来 width:1920px 的元素就只占屏幕的 1/2 了。这肯定不是网页开发者想要的效果,怎么屏幕还是24寸,设计的网页缩小了呢。

该怎么办呢?聪明的你,肯定想到了,很简单嘛,让每个css代表的px点(也叫逻辑像素)对应到设备上的2个点(实际像素)就可以了,而这个概念就是 devicePixelRatio(后面简称为DPR)。当 DPR 为2的时候,width:1920px 的元素,实际渲染到电脑显示器上为3840个像素。

在windows10 系统上,打开设置里的显示选项,就能看到系统设置的当前这个显示器的DPR为多少。

你也可以通过 window.devicePixelRatio 访问到

但这个代表的是浏览器自身的 DPR, 跟系统设置的 DPR 有区别的原因在于浏览器自身也有放大缩小的功能,换言之,浏览器缩放的原理就是改变自身的 DPR。

举个例子,现在在我们的4k显示器上,系统的 DPR是2,在此基础上,再把浏览器页面放大到原来的2倍,那么浏览器的DPR就变成了 2 * 2 = 4

这代表的意思是,系统默认情况下,1 个css像素用2个实际的设备像素来显示,现在则用4个像素来显示。

我们把浏览器缩放回 100%,让浏览器的DPR和系统的DPR保持一致,都是2。我们前面讲过 screen.width或height 获取到的是设备的分辨率,我们应该期望screen.width 为 3840,但实际上你获取到的依然是 1920,screen.width或height 实际上获取到的 屏幕分辨率 / 系统DPR 得到的值,而且只要系统的DPR没变,这个值就不会变。准确地说,在浏览器获取到显示器分辨率的公式为:(浏览器缩放为100%时的 screen.width 或 height)*window.devicePixelRatio。

PPI

随着 iPhone 4的发布,retine(视网膜)屏幕的概念走进了我们。当时苹果公司给出的定义是,只要 PPI 超过了 300,人眼就再也识别不出来屏幕上的像素点了,所以很容易理解, PPI 是屏幕的像素密度(Pixel Density)单位,它的全称叫 Pixels Per Inch, 也就是每英寸(2.54厘米)所拥有的像素点。因为形容屏幕的大小一般是用对角线的长度,所以计算 PPI 一般也是用 对角线的像素数 / 对角线长度

拿 iPhone4 来举例子,iPhone4的屏幕分辨率为 640 * 960, 屏幕大小为3.54英寸(也就是对角线的长度),那么 PPI 计算公式如下。

6402+9602!3.54326\dfrac{ \sqrt{ 640 ^ { 2 } +960 ^ { 2 } \phantom{\tiny{!}}} }{ 3.54 } \approx 326

iPhone 4 的 ppi为 326,当时的显示效果惊艳了世人。随之而来的问题跟桌面端一样,就是逻辑像素和设备像素的匹配问题。在开发网页的时候,它的逻辑像素为 还是 320 * 480,是为了跟iphone 4之前的iphone手机保持一致,相当于设置了 DPR 为2。现在大多数UI设计师以 iPhone6 为基准来设计页面,也就是宽度为750,打开chrome的模拟器,它的逻辑像素为375。

无论是桌面端 24寸4K显示器,还是手机端视网膜以上屏幕,对于新的网页开发者来说在开发上就不太直观了,为什么明明是3840的宽度,却是按照1920的宽度来开发的,特别是以后当所有的1080p显示都退役,世界上只有视网膜屏幕之后。这是技术上的一种兼容,技术的进步是迭代式的,当无法抛弃过去的时候,那么最好就是在不影响过去功能的情况下增加新的东西。假如最开始的显示器就是4k的,那么现在在24寸显示器上适配的逻辑像素可能就原始是以3840计算的。

所以对于开发人员来说,我们应该关注的其实是,逻辑像素与其对应的显示器大概的大小。设备的DPR会随着技术的进步而变大,以后可能会在24寸的设备里塞下8k(7680 * 4320)的显示器,但是其的逻辑像素依然还是1080p,所以我们在设计网页的时候,就可以把1080p的逻辑像素和24寸对应起来。

比如说,

27寸 - 2560 * 1440

24寸 - 1920 * 1080

15.6寸 - 1440 * 810

14寸 - 1376 * 774

上面的显示大小其实都是针对屏幕的对角线长度,开发人员其实只在乎显示的宽度具体为多少,按照 16:9:18,那么算出来的对应宽度分别差不多是 24寸、21寸、13.8寸和12寸了。不过这是针对桌面端的了。

如果我们参考 bootstrap4的断点,因为其主要是针对移动端设计的,所以它把所有逻辑像素宽度为 1200px 及以上都定义为超大的桌面端应用了。

// 微型设备 (竖立的手机, 小于576px)// 不需要 media query,因为这在bootstrap中是默认的

// 小型设备 (横着的手机, 576px及以上)
@media (min-width: 576px) { ... }

// 中型设备 (平板, 768px及以上)
@media (min-width: 768px) { ... }

// 大设备 (桌面端, 992px及以上)
@media (min-width: 992px) { ... }

//超大型设备 (大的桌面端, 1200px及以上)
@media (min-width: 1200px) { ... }

我们会看到有些网站会将网站内容限制为最宽1200px,超过之后就内容居中,两边留白,也就是参考bootstrap的这种设计,比如说facebook 和twitter,而这种设计也已经适合大多数网站了。

如上twitter的网站,中间的区域被固定为1200px,两边则留白。

测试题

这里准备了几道测试题,帮你复习上面的概念。

  1. 24英寸、 分辨率为1920 * 1080的屏幕的ppi是多少?
  2. 设备像素为5120 x 2880,sreen.width = 2560, window.devicePixelRation = 3, 浏览器自身zoom了多少?
  3. 在不知道任何外界环境的情况下,通过 JavaScript 有办法精确获取到设备的分辨率吗,如果可以的话,方法是?
  4. 用你第一题得到的 PPI 跟 iPhone4之前的手机(320*480, PPI为163)进行比较,你觉得这提醒你在网页开发中需要注意什么?(注:1920 / 320 = 6,但是屏幕的宽度比不止6倍。)

参考文章

A tale of two viewports — part one (quirksmode.org)

A tale of two viewports — part two (quirksmode.org)

Meta viewport (quirksmode.org)