像素与设备间的爱恨情仇一

2019-09-01

在我们的前端开发中，像素是我们一直打交道的东西。但是在开发web端的时候，没有特殊需求我们并不会太关注像素在不同设备时的展示差异，因为web端设备屏幕一般都比较大，容错性比较高，而wap端设备屏幕比较小，所以一个很小的差异在wap端都显得很明显。

网上关于这方面的文章有很多,但大部分不是抄来抄去就是没讲到点上，这篇博客记录我这些天探索的结果。

闲聊

许久没有写博客了，从实习开始后就一直因为各种时间忙，慢慢的对待博客就懈怠了。但是忙归忙，要想挤时间还是可以挤出来的，最主要的变懒了，没有意识到写博客的重要性。在今年春招的时候就吃了大亏，因为在实习的那段时间，虽然学习了很多知识，但是没有去总结，比如有一次面试官问我在工作中有没有遇到比较棘手的问题，有的话是怎么解决的？我一下子实在是想不到有什么合适的例子可以说。

最近打算慢慢的把博客捡起来，遇到有值得记录的东西就记录起来。

言归正传

viewport

当我们在开发wap端的时候，必然会接触一段类似下面这样的代码：

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

这一段代码用起来百试不爽。如果不加这段代码，页面在wap端看起来千奇百怪，用了这段代码就像使用了魔法一样让页面的样式看起来一下变得正常起来，这一段代码看起来没几个单词但里面牵扯了不少知识。

在移动端有三种viewport，分别是visual viewport(视觉视口)、layout viewport(布局视口)、ideal viewport(理想视口)。以下都用英文名称。

因为在前端开发中，我们最关注的是宽度，所以以下基本上都是在谈论宽度。实际上高度与宽度是成一个比例的，比例就是手机(ideal viewport)宽高的比。

1. visual viewport

visual viewport代表可视区域的大小，也就说在你手机屏幕上看到的宽高是几像素，visual viewport宽高就是几像素。注意，这里说的像素是css像素，而css像素又和layout viewport有关。visual viewport的宽高可以分别用window.innerWidth和window.innerHeight获取到。

2. layout viewport

layout viewport就是css操作的地方，当body上使用width: 100%;的时候，页面的宽度就等于layout viewport的宽度。在默认情况下大部分浏览器设置的layout viewport为980px。layout viewport的宽高可以分别用document.documentElement.clientWidth和document.documentElement.clientHeight获取到。

3. ideal viewport
ideal viewport它为每个设备上的web页面提供了一个理想的尺寸（ideal size，这个值在每个设备上都是规定好的）。因此,每个设备的ideal viewport的尺寸都会不同。

以下为ppk整理的部分机型的ideal viewport值以及存在的兼容性

好了，上面几种viewport的基本信息介绍完了。啥？这些和其他人写的一样啊，概念介绍完还是完全没搞懂啊，这些和<meta name='viewport'...到底有啥关系啊。别急，下面就来介绍他们之间的关系。

viewport 总结

首先，目前我们可以确认的是：第一，visual viewport的宽度就是设备屏幕的宽度；第二，ideal viewport是理想的设备对应的web页面宽度，值是固定的。

有了上面的基本信息，我们对应着上面的那段代码解释一下：

首先content中width=device-width里的width值得是layout viewport的宽度，这句代码的意思就是让layout viewport的宽度等于ideal viewport的宽度。那这个有什么用呢？这样设置我们就能根据ideal viewport的规格编写css啦，我们的“理想视口”的规格,当然就能让网页正常的显示出来。

再看content中initial-scale=1.0，相信大家都有过在wap端缩放网页的经历吧，这里的initial-scale指的就是默认缩放，所以这段代码的意思是指设置默认缩放比例为1，也就是不缩放。这里的缩放比例又是什么呢？所有的缩放比例指令都相是对于ideal viewport而言，缩放比例是根据这样算出来的：缩放比例 = ideal viewport / visual viewport。那么initial-scale=1.0的意思就是把visual viewport的大小设为和ideal viewport一样大。在wap端还有一个这样的普遍的规律，不管你的layout viewport多大，都会完整的将layout viewport完整的铺满屏幕，也就是说visual viewport = layout viewport，这也是为什么没有设置<meta name='viewport'...的wap网页看起来像对应web端的超级缩小版，一个小小的移动设备要显示980px(上面说过，大部分浏览器默认layout viewport的宽度为980px)，那字体大小设置为12px的字得有多小。

剩下的user-scalable=no, minimum-scale=1.0, maximum-scale=1.0的意思分别是：是否允许用户缩放，最小缩放多少，最大缩放多少。

解析完我们再回过来看上面的代码，如果说visual viewport = layout viewport，name我们设置width=device-width和initial-scale=1.0的功能是一样的啊，为什么要同时写呢？我们上面说的ideal viewport和layout viewport在各个浏览器上都不同的规定，比如最大缩放多少啊什么的，还有一些兼容性问题，所以两个都写最稳定。

撒花

好了，如果在看这篇文章还是没完全搞明白的话，那就真机调试再仔细琢磨，代码很简单，下面这段代码就能解决，自己再修改对比调试。需要注意的是，样式最好用移动设备查看，参数(window.innerWidth…)什么的当然用电脑查看更方便啦!

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- <meta name="viewport" content="initial-scale=1, width=device-width"> -->
	<meta name="viewport" content="initial-scale=0.5">
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		div{
			width: 100%;
			height: 300px;
			background-color: red;
			font-size: 12px;
		}
	</style>
</head>
<body>
	<div>少时诵诗书所所所</div>
</body>
</html>

我们上面讲的是围绕<meta name='viewport'...这段代码来讲解的，关于viewport还有许多细节，想要了解的话可以看ppk的论点篇一、篇二和篇三，如果觉得英文文档看得费力可以看ant-design-mobile团队的这篇中文总结。