固定宽度布局开发WebApp如何实现多终端下自适应？

大家好，我是IT修真院成都分院第09期学员。今天分享的内容是固定宽度布局开发WebApp如何实现多终端下自适应？

1.背景介绍

1.1 现在人通过手机浏览网页占了大多数，随着浏览方式的改变，网页在webapp下面实现多终端自适应，无论对于避免工程师无谓的重复劳动或者是项目管理的便捷性上来说重要性都是十分巨大的。然而在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。

2.知识剖析

一.像素的概念：

1.设备像素：屏幕的物理像素，任何设备屏幕的物理像素的数量是固定不变的，单位是pt。

2.css像素：CSS像素是Web编程的概念，独立于设备的用于逻辑上衡量像素的单位，也就是说我们在做网页时用到的CSS像素单位，是抽象的，而不是实际存在的。

那么，当我们定义一个width:200px，这个元素跨越了200个css元素，而200个css元素相当于多少个设备像素取决与两个条件：1.页面是否缩放。2.屏幕是否为高密度。要想弄清楚这两个条件，我们来看看分辨率的概念。

二.分辨率概念：

以iphone5为例：分辨率：1136pt×640pt指屏幕上垂直有1136个物理像素，水平上有640个物理像素。

屏幕尺寸：4英寸（注意英寸是长度单位，不是面积单位。4英寸指的是屏幕对角线的长度。）

屏幕像素密度：326dpi（ppi）：屏幕像素密度（Pibel Per Inch）简称 ppi ，单位是 dpi（dot per inch）。这里指屏幕水平或垂直每英寸有326个物理像素。原则上来说，ppi越高越好，因为图像会更加细腻清晰。

三.视口：

桌面浏览器中，浏览器窗口就是约束你的CSS布局视口（又称初始包含块）。它是所有CSS百分比宽度推算的根源，它的作用是给CSS布局限制了一个最大宽度，视口的宽度和浏览器窗口宽度一致。但是在移动端，情况就很复杂了。

布局视口：一个没有为移动端做优化的网页，会尽可能缩小网页让用户看到所有东西。布局视口我们是看不见的，只知道网页的最大宽度是 980px ，并且被缩放在了屏幕内。

视觉视口：视觉视口是用户正在看到的网页的区域，大小是屏幕中CSS像素的数量。

理想视口：布局视口明显对用户是不友好的，完全忽略了手机本身的尺寸。所以苹果引入了理想视口的概念，它是对设备来说最理想的布局视口尺寸。理想视口中的网页用户最理想的宽度，用户进入页面的时候不需要缩放。现在讨论所谓的『最理想的宽度』到底是多少？其实，如果我们把布局视口的宽度改成屏幕的宽度不就不用缩放了么。可以这样设置告诉浏览器使用它的理想视口：<meta name="viewport" content="width=device-width">

从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的（意思就是你分辨率越大，css中1px代表的物理像素就会越多）。2)用户对设备界面的缩放，例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍.

四.devicePixelRatio属性

它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。理解：css中的px可以看做是设备的独立像素，所以知道devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。举个栗子：在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。

五.ideal viewport——完美适配移动设备的理想viewport。

所谓的完美适配（通常意义下，攻城狮口中的自适应）指的是:

1)不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；

2)显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况是这段14px的文字无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。

3. 常见问题

在进行移动设备网站的开发时，如何控制ideal viewport呢？

我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中：

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

name="viewport" content="width=device-width"———把当前的viewport宽度设置为 ideal viewport 的宽度。

width=device-width —— 设置layout viewport  的宽度，为一个正整数，或字符串"width-device"

initial-scale ——设置页面的初始缩放值，为一个数字，可以带小数

minimum-scale —— 允许用户的最小缩放值，为一个数字，可以带小数

maximum-scale —— 允许用户的最大缩放值，为一个数字，可以带小数

user-scalable —— 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

6. 扩展思考

关于meta viewport的更多知识：

关于缩放：

这里指的缩放，是相对于ideal viewport来缩放的，缩放值越大，当前viewport的宽度就会越小，反之亦然。

举个栗子：在iphone中，ideal viewport的宽度是320px，如果我们设置 initial-scale=2 ，此时viewport的宽度会变为只有160px了

理解：就是原来1px的东西变成2px了，但是1px变为2px并不是把原来的320px变为640px了，而是在实际宽度不变的情况下，1px变得跟原来的2px的长度一样了，所以放大2倍后原来需要320px才能填满的宽度现在只需要160px就做到了。因此，我们可以得出一个公式：

visual viewport宽度 = ideal viewport宽度 / 当前缩放值

当前缩放值 = ideal viewport宽度  / visual viewport宽度

ps: visual viewport的宽度指的是浏览器可视区域的宽度。ideal viewport宽度指的是完美适配移动设备的宽度

7. 参考文献

8. 更多讨论

1.独立像素与css像素是什么关系？

答：两者基本一致，并无太大区别。

2.width=device-width中的width和device-width分别指的是什么，这句话有什么作用？

答width指的是视口宽度，device-width指的是设备宽度。这句话意思就是视口宽度等于设备宽度。

3.能说说 vh vw 单位的应用吗，与我们平时用的% rem有什么区别

答：vh vw是基于视口高度和宽度的相对大小的相对于%精确一些，而rem是基于html所设置的字体根的大小。

鸣谢

感谢大家观看！

------------------------------------------------------------------------------------------------------------------------

技能树.IT修真院

“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！