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

1.背景介绍

现在人通过手机浏览网页占了大多数，随着浏览方式的改变，网页在webapp下面实现多终端自适应，无论对于避免工程师无谓的重复劳动或者是项目管理的便捷性上来说重要性都是十分巨大的。

然而在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。

2.知识剖析

visual viewport的概念：

通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。

在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。

在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站。

layout viewport的概念：

简单的说，包含整个页面内容的那个区域

可以这样理解：有一张大白纸，白纸上面放置的就是html、body、div这些元素。这张大白纸就是layout viewport。

layout viewport的功能是用来约束你网站中最顶级包含块元素（containing block）html的。html的默认宽度是layout viewport宽度的100%

ideal viewport的概念：

就是给移动端屏幕的一个用于设置layout viewport的参考值，这个值是生产厂商给的。如果layout viewport的宽度等于ideal viewport 的宽度，屏幕上的文字、图片（当它们以px为单位时）的大小看起来就会很恰当。（或者说在不同设备上看到的10px的物理上的长度是相同的） 例如iphone 5的ideal viewport是宽度320px，iphone 6的宽度是375px。

3.常见问题

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

4.解决方案

layout viewport的宽度和ideal viewport的宽度相等。缩放比例是1的时候，visual的宽度就和layout viewport相等了。

<mate 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代表允许

target-densitydpi： 值可以为一个数值或high-dpi、medium-dpi、low-dpi、device-dpi这几个字符串中的一个

注意：当target-densitydpi=device-dpi时，css中的1px会等于物理像素中的1px。

５.编码实战

见视频

６.拓展思考

度量layout viewport：

document.documentElement.clientWidth

度量visual viewport

window.innerWidth

如何判断当前设备是否为移动端？

方法1：利用navigator的userAgent属性

/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)

方法2：检测移动端的TouchEvent事件var isMobile = false;//默认PC端

function mobile() {

    try{

        document.createEvent("TouchEvent");

        return true;

     }

    catch(e){

        return false;

    }

}

isMobile=mobile();

７.参考文献

两个viewport的故事

移动前端开发之viewport的深入理解

Responsive design和Adaptive design的区别？

８.更多讨论

layout viewport，ideal viewport和width=device-width的对应关系？

layout viewport的宽度对应width，ideal viewport的宽度对应device-width

移动端缩放屏幕，改变的是什么？

改变的是layout viewport的大小，放大屏幕，layout viewport的宽高（css像素为单位），就会按比例缩小。

html对应的区域是不是就是viewport对应的区域？

默认情况下是的，因为html的宽度默认是viewport宽度的100%。但是对html的宽度设置后，就可能比viewport的区域大，或者小。