初冬.jpg
移动设备浏览器的问题中心在于CSS，特别是viewport的尺寸。在移动设备上进行网页的开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配。
几个重要的概念####
设备的pixels和CSS的pixels#####
css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。
layout viewport宽度
visual viewport#####
visualviewport是当前显示在屏幕上的部分页面的大小。但是CSS 布局，特别是感性的宽度（percentual widths）通常是按照layoutviewport来定义，而比visualviewport宽很多。visualviewport的宽度可以通过window.innerWidth来获取。部分设备visualviewport的宽度等于layout viewport的宽度。
根据上面的描述，显然visualviewport的宽度和layout viewport的宽度都不适于移动端CSS布局适配。另外<html>元素的宽度继承于layout viewport，如果layout viewport宽度等于屏幕的宽度，那么为移动端设计的网站就可以在屏幕中完全显示。当是移动设备屏幕尺寸众多，如何适配所有的设备？
一种解决方案是根据浏览器窗口的宽度（CSS3中的vw）进行CSS布局，不过这种方案存在浏览器兼容问题。如果你的网站只需要运行在现代浏览器上，此方案是很好的选择。
vw的兼容性
另一种方案是，页面所有元素的宽高根据HTML的根元素<html>的font-size大小来计算，<html>的font-size根据屏幕的宽度动态设置。这就是基于rem的适配方案的核心思想。从下面的图可以看出rem比vw具有更好的浏览器兼容性。所以，基于rem的适配方案应该作为移动界面开发的首选方案。
rem的兼容性
rem方案的实现步骤#####
- 修改layout viewport 的宽度，使其等于屏幕的宽度，通过添加下面的mete标签就可以做到这点
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
其中width=device-width用于设置viewport的宽度等于屏幕的宽度，initial-scale=1.0, maximum-scale=1.0的作用同width=device-width一样，那么，为什么还要同时设置这两者？因为当它们单独使用时，表现不够完美，下面两张图展示了单独使用时的浏览器兼容性：
width=device-width.png
initial-scale=1.png
为了弥补彼此的缺陷，所以要同时设置。另外，当两者指定的值不同时，浏览器取其中的最大者。这也是手淘的flexible.js方案动态添加此<mete>标签时不添加width=device-width的原因。
在手淘的flexible.js方案中initial-scale和maximum-scale的缩放值根据操作系统和屏幕的像素密度（dpr）不同而有所不同，例如在dpr=2的iPhone5上缩放比是0.5(scale=1/dpr)，iPhone5的屏幕宽度是320（CSS的pixels）所以添加<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, user-scalable=0">后，viewport的宽度是640（CSS的pixels）
initial-scale=0.5, maximum-scale=0.5
flexible.js的作者为自己挖了一个坑。设置特殊的缩放比会带来后续的麻烦，如何保证字体在屏幕尺寸相同，dpr不同的设备上有相同的表现。举个例子：同样是iPhone5设备，A设备的dpr=2，B设备的dpr=3，根据flexible.js方案，A、B设备的缩放比分别是 0.5和0.3，为了使A设备上的font-size=24px的文字在B设备上有同样的表现，需要设置font-size=36px。这是因为A设备的scale=0.5，A设备的layout viewpoint的宽度等于640（CSS的pixels），因为A设备的scale=1/3，A设备的layout viewpoint的宽度等于960（CSS的pixels），A、B设备的物理尺寸相同，要使文字在两块屏幕上表现相同，那么同一个文字在两块屏幕上占的比例也要一样，所有：A(font-size)/640 = B(font-size)/960。为了使采用px作单位的文字在不同缩放比的屏幕上有一致的表现，需要针对不同的缩放比使用不同大小font-size。采用不同的缩放比是作者挖的坑，使用不同的font-size是作者为了填自己的坑，这两部就是在画蛇添脚。从这里已经看出，要使同一个布局在不同的屏幕上表现一至，关键在保证每个元素相对viewport的宽度的大小是一致的。
-
编写CSS时元素的width/height、margin、padding等使用rem作为单位，
属性的数值 = 设计稿上标注的数值 / 设计稿的宽度，这样就计算出了设计稿上的元素和设计稿的比例。 -
在步骤一中我们得出结论，要使同一个布局在不同的屏幕上表现一至，关键在保证每个元素相对viewport的宽度的大小是一致的。接下来要做的就是，动态设置<html>元素的font-size等于layout viewport的宽度。由于我们采用的是rem作为单位，这样变保证了设计稿上的布局和不同设备上呈现的样式有相同的比例。适配完成。
上面说了flexible.js中有画蛇添脚的地方，我自己修改了其中不必要的地方，放在了github上H5-flexible。
在写css时，可以使用sass函数减少px转化为rem的工作量：
@function rem($pixels， $design_draft_width：?) { @return $pixels / $design_draft_width + rem; }
将?改为设计稿的宽度。
网友评论