大家好，我是IT修真院深圳分院第01期学员，一枚正直纯洁善良的web程序员。
今天给大家分享一下，修真院官网CSS任务13，深度思考中的知识点——固定宽度布局开发WebApp如何实现多终端下自适应？
一、背景介绍
现在人通过手机浏览网页占了大多数，随着浏览方式的改变，网页在webapp下面实现多终端自适应，无论对于避免工程师无谓的重复劳动或者是项目管理的便捷性上来说重要性都是十分巨大的。
然而在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。
自适应和响应式的区别？
其实RWD和AWD都是响应式设计，从外观上很难分辨，但他们自己运行机理不同，RWD是主动式的响应设计，AWD是被动式的响应式设计，RWD不管用户使用的是什么设备都是在服务器把数据推送到浏览器后，脚本或CSS自行侦测屏幕大小后执行对应的样式表内容，并且一直通过本地脚本在监听屏幕大小的变化，随时做出样式响应的变化，所以是主动的。但AWD是用户通过浏览器发送请求后，服务器根据请求中夹带的用户设备设备信息做出判断，调用已经在服务器里准备好的，适应对应设备样式文件+HTML内容+JS，返回给浏览器以这种方式响应不同设备。
二、知识剖析
2.1.Viewport的概念
1).通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。
2).在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。
3).在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站。
移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。
这里有一张浏览器的默认viewport宽度值的表，可以看下。
2.2.移动设备哪些因素会引起css中px的变化？
在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。
1）从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的（意思就是你分辨率越大，css中1px代表的物理像素就会越多）。
2)用户对设备界面的缩放，例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。
2.3.devicePixelRatio属性
1)它的官方的定义为：设备物理像素和设备独立像素的比例，也就是devicePixelRatio =物理像素/独立像素。
理解：css中的px可以看做是设备的独立像素，所以知道devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。
举个栗子：在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。
2.4.ideal viewport——完美适配移动设备的理想viewport。
所谓的完美适配（通常意义下，攻城狮口中的自适应）指的是:
1)不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；
2)显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况是这段14px的文字无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。
三、常见问题
在进行移动设备网站的开发时，如何控制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代表允许
target-densitydpi： 值可以为一个数值或high-dpi、medium-dpi、low-dpi、device-dpi这几个字符串中的一个
注意：当target-densitydpi=device-dpi时，css中的1px会等于物理像素中的1px。
5.编码实战
详见视频
六、拓展思考
6.1.关于缩放
这里指的缩放，是相对于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宽度
6.2.initial-scale的默认值是多少？
initial-scale的默认值很显然不会是1，因为当initial-scale = 1时，当前的layout viewport宽度会被设为ideal viewport的宽度，但前面说了，各浏览器默认的layout viewport宽度一般都是980啊，1024啊，800啊等等这些个值，没有一开始就是ideal viewport的宽度的。
安卓设备上的initial-scale默认值：如果没有设置的话，就没有，一定要设置，这个属性才会起作用。
iphone和ipad上的initial-scale默认值：
测试：在iphone上，我们不设置任何的viewport meta标签，此时layout viewport的宽度为980px，但我们可以看到浏览器并没有出现横向滚动条，浏览器默认的把页面缩小了。根据上面的公式，当前缩放值= ideal viewport宽度/ visual viewport宽度，我们可以得出：
当前缩放值= 320 / 980，也就是当前的initial-scale默认值是0.33这样子。
6.3.总结得到缩放值的公式：
当前缩放值= ideal viewport宽度/ visual viewport宽度
//visual viewport宽度指的是浏览器可视区域的宽度。
//ideal viewport宽度指的是完美适配移动设备的宽度
提示：如果不设置meta viewport标签，移动设备上浏览器默认的宽度值为800px，980px，1024px等这些，总之是大于屏幕宽度的（意思就是说，会不自适应手机端的页面）
七、参考文献
参考二：Responsive design 和 Adaptive design 的区别？
八、更多讨论
1.自适应和响应式各有什么优劣？
2.网页自适应设计常见问题有哪些？
3.有哪些常见的布局方式？
感谢大家观看
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
你可以直接点击此链接与我一起学习：邀请码
