关于Viewport与device-width的一点理解

发表于

再进行移动web开发的时候都要加一句：

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

devicePixelRatio其实指的是window.devicePixelRatio,window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。

1
window.devicePixelRatio

非视网膜屏幕的iphone上，屏幕物理像素320像素，独立像素也是320像素，因此，window.devicePixelRatio等于1.
在视网膜屏幕的iphone上，屏幕物理像素640像素，独立像素还是320像素，因此，window.devicePixelRatio等于2。

此时的CSS像素对应着以后要提到的理想视口，其对应的javascript属性是

1
screen.width/screen.height

而对于设备像素比DPR也有对应的javascript属性

1
window.devicePixelRatio

以iphone8为例，iphone8的CSS像素为375px677px，DPR是2，所以其设备像素为750px1354px

1
2
3
750(px) / 375(px)  = 2
1354(px) / 677(px) = 2
750(px)*1354(px) /  375(px)*677(px) = 4


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
(function(doc, win) {
	var docEl = doc.documentElement,
		resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
		recalc = function() {
			var clientWidth = docEl.clientWidth;
			if(!clientWidth) return;
			if(clientWidth >= 750) {
				docEl.style.fontSize = '100px';
			} else {
				docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
			}
		};
	if(!doc.addEventListener) return;
	win.addEventListener(resizeEvt, recalc, false);
	doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

  1. 我们经常使用的里的viewport究竟是什么意思，这里的device-width跟我们用JS获取到的屏宽的区别与联系分别是什么，为什么去掉标签后页面会变得很小很小？
  2. 为什么很多分辨率很大的屏幕宽度其实并不大，屏幕分辨率与用JS获取到的屏宽的区别与联系分别又是什么？

视口 viewport

viewport 基础

viewport 解释为中文就是‘视口’的意思，也就是浏览器中用于显示网页的区域。在 PC 端，其大小也就是浏览器可视区域的大小，所以我们也不会太关注此概念；而在移动端，绝大多数情况下 viewport 都大于浏览器可视区，保证 PC 页面在移动浏览器上面的可视性。为提升可视性体验，针对移动端有了对 viewport 的深入研究。

viewport 详解

在移动端有三种类型的 viewport: layoutviewport、visualviewport、idealviewport。具体解释如下：

  • layoutviewport: 大于实际屏幕， 元素的宽度继承于 layoutviewport，用于保证网站的外观特性与桌面浏览器一样。layoutviewport 到底多宽，每个浏览器不同。iPhone 的 safari 为 980px，通过 document.document.clientWidth 获取。
  • visualviewport: 当前显示在屏幕上的页面，即浏览器可视区域的宽度。
  • idealviewport: 为浏览器定义的可完美适配移动端的理想 viewport，固定不变，可以认为是设备视口宽度。比如 iphone 7 为 375px, iphone 7p 为 414px。

viewport 设置

我们通过对几种 viewport 设置可以对网页的展示进行有效的控制，在移动端我们经常会在 head 标签中看到这段代码：

1
<meta name='viewport' content='width=device-width,initial-scale=1,user-scale=no' />

1px的物理像素的解决方案

从第一部分的讨论可知 viewport 的 initial-scale 具有缩放页面的效果。对于 dpr=2 的屏幕，1px压缩一半便可与1px的设备像素比匹配，这就可以通过将缩放比 initial-scale 设置为 0.5=1/2 而实现。以此类推 dpr=3的屏幕可以将 initial-scale设置为 0.33=1/3 来实现。

(function (baseFontSize) {
    const _baseFontSize = baseFontSize || 75;
    const ua = navigator.userAgent;
    const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
    const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
    const dpr = window.devicePixelRatio || 1;
    if (!isIos && !(matches && matches[1] > 534)) {
        // 如果非iOS, 非Android4.3以上, dpr设为1;
        dpr = 1;
    }
    const scale = 1 / dpr;
    const metaEl = document.querySelector('meta[name="viewport"]');
    if (!metaEl) {
        metaEl = document.createElement('meta');
        metaEl.setAttribute('name', 'viewport');
        window.document.head.appendChild(metaEl);
    }
    metaEl.setAttribute('content', 'width=device-width,user-scalable=no,initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale);

    document.documentElement.style.fontSize = document.documentElement.clientWidth / (750 / _baseFontSize) + 'px';
})();

要说这个，先来了解下一些移动端基础知识：

1、物理像素(设备像素，分辨率)

设备像素，在同一个设备上，它的物理像素是固定的，这是厂商在出厂时就设置好了的，即一个设备的分辨率是固定的。

2、逻辑像素(CSS像素)

CSS像素，viewport中的一个小方格，CSS样式代码中使用的是逻辑像素。如果在一个设备中，物理像素与逻辑像素相等，将不会产生任何问题。但是，在iphone 4中，物理像素是640px960px，而逻辑像素数为320480px。因此，需要使用大约4个物理像素来显示一个CSS像素。

3、像素比

物理像素与逻辑像素之间的比例。当像素比为1:1时，使用1个物理像素显示1个逻辑像素；当像素比为2:1时，使用4个物理像素显示1个逻辑像素。

4、CSS中的1px并不等于设备的1px

在CSS中一般使用px作为单位，在Web浏览器中CSS的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成一个错觉，那就是CSS中的像素就是设备的物理像素。但实际情况却并非如此，CSS中的像素只是一个抽象的单位，在不同的设备或不同的环境中，CSS中的1px所代表的设备物理像素是不同的。
在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320480，在iphone3上，1个CSS像素确实是等于1个物理像素的。后来随着技术的发展，移动设备的像素越来越高，从iphone4开始，推出了所谓的Retina屏，分辨率提高了一倍，变成640960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，1个CSS像素是等于4个物理像素的。

5、实现真正的1物理像素

当viewport的属性initial-scale为1时，页面大小正常，但initial-scale为0.5时，页面被缩小了1倍，像素比为2:1的设备本来1个CSS像素宽度占2个物理像素宽度，缩小后的1个CSS像素宽度就只占1个物理像素，即实现了真正的1物理像素。
eg：border-width:1px并不是最小边框，浏览器可以显示的最小粒度比1px还要小。为什么会出现比border-width:1px更细的边框？
屏幕能够显示的最小粒度是1个物理像素，iPhone4的像素比为2，设置border-width:1px后，边框占了4个物理像素，如果能让边框的宽度为1物理像素，那么它就比1个CSS像素要细，这可以通过设置<meta name="viewport" content="width=device-width, initial-scale=0.5">。

CSS pixel与device pixels (css px与device px)

首先了解下什么是CSS pixels，什么是device pixels；

1．CSS pixels可以理解为css像素，是浏览器使用的抽象单位，主要用来在网页上绘制内容。也可以说css px是专门为web开发者提出的一个抽象概念，也只跟我们平时写的css样式有关，与分辨率（比如720px*1280px）里的px没关系。

2． device pixels可以理解为是设备像素，官方的解释是：显示屏幕的最小物理单位，每个dp包含自己的颜色、高宽等。

对于我们做web开发的人来说，我们用到的最多的地方是“css像素”，即类似width:300px;font-size:14px;这类的css语句里用到的。它跟设备自身的px是没关系的。也就是说1个CSS 像素占多少个物理像素是不确定的，这个问题通过页面的放缩比较容易理解。比如一个普通的html页面上，有一个300px的元素；如果我们放大页面，元素会占据更多的设备像素（即device pixels），但它的CSS pixels不变，依然是300px；缩小页面也是同样的道理，占据了更少的device pixels，但它的CSS pixels不变。也就是说，元素占据了多少device pixels，是由当前页面的放缩比例而定的。

不过，页面的缩放对我们web开发来说是好像没有任何意义的。但有一个问题，我们开发出来的页面是想要在各个屏幕个以最佳的样式展示出来的，我们不能让页面里存在不能控制的元素。所以就出现了它：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /> 也就是我们在进行web开发的时候经常用到的viewport。那么viewport到底是个什么玩意儿呢，而且content里面width为什么要等于device-width呢，device-width又是个什么概念呢？下面我们来看看它们哥俩儿是什么。

Viewport 与 device-width

在解释这两个概念之前，先说一个大家都知道，但不明白为什么的情况：把一个普通的在PC上开发的HTML页面直接放手机上，你会发现不管多大的页面都可以在小小的手机屏幕上显示，但是图文都会显示的特别小；如果你用js获取下页面宽度，你会发现，大多数的页面宽度都是980px的，这个就跟viewport有关。

Viewport起源于苹果，但现在已经被大多数浏览器支持。关于viewport有两个概念visual viewport跟layout viewport。这里visual viewport也就是视觉上的窗口，可以理解为设备自己的宽度。这时，如果你有一个长960的页面，有一个元素是20%（实际解析出来就是192px）。但如果我用宽为320px的屏幕打开呢，这个元素就成了64px，但是这个时候我设置的字体大小是12px，在320px的屏幕上就只能显示64/12个字了～

鉴于这个问题，苹果找到一种解决方法，在移动版的safari中定义了viewport meta标签，它的作用就是创建一个虚拟的窗口（viewport），这个虚拟的窗口就是layout viewport分辨率接近桌面显示器，apple将其定位为980px。在手机上，可以通过document.documentElement.clientWidth来获取。

其他浏览器厂商也有不同的解决办法，例如UCweb是使用的中间技术。

另外据说，不同浏览器厂商对于layout viewport的大小都有自己的定义。但是，我用手上不多的几个手机（小米2s、SONY、金立、ipad）测试的结果，都是980px。其中在小米2s上测试了小米自带浏览器、QQ浏览器、UC浏览器、谷歌浏览器，还有opera浏览器，结果都一样；其他的手机上面不管装了什么浏览器，都测试了，结果都是980px。但是这个值对于我们web开发来说，好像也没有什么用处。

因为大多数情况下，<meta name="viewport" content="width=device-width" />这个标签对我们来说是最给力的，可以让我们的页面里的图文显示的是正常的，很大程度上提高了页面的可读性。而这一meta标签的功能就是设置layout viewport为device-width的宽度。但是device-width具体是什么呢？

第一代iphone的时候，分辨率为320480，屏幕尺寸为3.5寸（注意，这个3.5寸说的是屏幕的对角线宽），这时候device-width就是320px，也是手机的分辨率宽，此时device-width就是设备宽。但第二代的iphone分辨率提高为了480960，屏幕尺寸为依然为3.5寸，如果device-width还是设备宽，那么同样是320px的页面放480*960的手机屏上，图文就会变得比较小，又会影响其可读性。因此iphone的device-width一直维持在320px，ipad一直维持在1024px。这个时候，device-width就不是设备宽了（也就不是分辨率的宽了），是一个中间层。Android采用的也是这一概念，其device-width值以360居多，但也不乏有像540px和600px这样的奇葩。在设置了标签以后，device-width值可以用window.innerWidth来获取device-width值。

有关DPI

dpi(Dots Per Inch)，有时也叫做ppi(Point Per Inch)，翻译过来也叫像素密度，表示设备每英寸所占有的像素数；数值越高，即代表显示屏能够以越高的密度显示图像。（注：这里的像素，指的是device pixels。）DPI的计算公式：

有意思的是，这个值比苹果官网上公布的326还有高一点点。

其中，PPI在120-160之间的手机被归为低密度手机，160-240被归为中密度，240-320被归为高密度，320以上被归为超高密度（Apple给了它一个上流的名字——retina）。

这些密度对应着一个特定的缩放比例值，拿我们最熟悉的iphone4或4s来说，它们的PPI是326，属于超高密度的手机。当我们书写一个宽度为320px的页面放到iphone中显示，你会发现，它竟然是满宽的。这是因为，页面被默认放大了两倍，也就是640px，而iphone4或4s的宽，正是640px。

DevicePixelRadio

DevicePixelRadio，定义：window.devicePixelRatio是设备上物理像素（也就是device-width）和设备独立像素（device-independent pixels，即dips）的比例。公式表示就是：window.devicePixelRatio = 物理像素/dips

Android 和 iPhone 中，都有一个占整个屏幕大小的换算单位， Android 中叫 dip 或 dp，iPhone 中叫 point 。Dip，就是device independent pixels，设备独立像素。而设备的物理像素和 dip 的比例就是 devicePixelRatio，此值可以通过 window.devicePixelRatio 属性获取。

据我查找到的一些资料显示，这里的独立像素的值其实就是device-width值。这个值也就是我们平时在手机上布局用的宽度，当然是在设置了标签的前提下。

这里为什么提到devicePixelRatio这个概念呢？

因为当devicePixelRatio=1.5的时候，也就是说当屏幕分辨率宽与device-width的比值为1.5时，某些手机自带的浏览器（特别是三星手机出现在最多）会出现1px的线解析成2px的bug，但是经测试同一部手机上安装的UC浏览器一般不会有这个bug。