发表于尚妆github博客，欢迎订阅。

移动端H5页面rem缩放方案flexible.js兼容375px方案的思路

参考：

移动端高清、多屏适配方案

viewport-and-flexible.js

flexible.js github

一个新的项目复用了一些老页面，老页面是使用375px方案进行移动端适配的，meta[viewport]使用的是<meta content="width=375, user-scalabe=no">，而新页面使用的是flexible.js伸缩方案，动态生成meta[viewport]<meta content="initial-scale=[num], user-scalabe=no">
如何在老页面使用px布局的前提下，新页面使用rem布局，组件也使用rem布局，并且组件可以兼容老页面和新页面是本文的结果。
首先会介绍375px方案和rem方案的实现原理。

375px方案 <meta name="viewport" content="width=375, user-scalabe=no">

375px方案的页面开发过程对新人非常的友好，利用页面的布局视口（layout viewport）为固定值375px，和移动端浏览器窗口的自动缩放功能（视觉视口==布局视口），可以很好的在大部分移动设备上展示375px宽度的内容。

具体的开发前提是设计师给到一份750px宽的设计稿，前端同学根据ps量的像素的50%进行css书写。若一个banner宽度量的为750px，在css中编写为width: 375px。至于为什么是2倍的设计稿，可以参考移动端高清、多屏适配方案这篇文章，可以找到答案。

375px方案相对于把meta[viewport]中的width属性设置成device-width,然后通过媒体查询写几套css规则来说已经是非常方便了。把所有不同屏幕尺寸的手机的布局视口（layout viewport）设置成一个固定的值375px，无需考虑其他屏幕尺寸的情况。

但375px方案的实现原理在某些安卓原生浏览器上有兼容问题，会产生一个重要bug --- 在某些安卓原生浏览器或webview中会出现视觉视口小于布局视口的情况。直观的显示就是页面会出现左右滑动。如下图：

375bug

而在上文也提到了375px方案得以实现就是依靠浏览器的原生能力 --- 迫使视觉视口等于布局视口。我们将这种情况下的document.documentElement.clientWidth(布局视口)与window.innerWidth(视觉视口)打印看看。

浏览器的缩放效果没有实现，至于为什么，先看两条关于缩放的总结公式/经验。

一、meta标签内没有设置initial-scale的情况

浏览器计算出的缩放值 = layout viewport width（布局视口） / ideal viewport width（理想视口） visual viewport width（视觉视口） = 浏览器计算出的缩放值 * ideal viewport width （理想视口） ===》 layout viewport width === visual viewport width // true

经过上述计算会将视觉视口会等于布局视口，布局上的所有内容都会出现在手机屏幕上。出现之前提到的bug的问题出在计算视觉视口上，浏览器会将所有计算出的缩放值都默认等于1，所以不管我们将布局视口设置能375还是其他任意值，视觉视口永远会是1 * ideal viewport width （理想视口）。ps：此款安卓机型的理想视口等于360.

二、meta标签内设置了initial-scale的值的情况

visual viewport width（视觉视口） = initial-scale（meta 标签内设置的初始缩放值） * ideal viewport width（理想视口又称设备独立像素） layout viewport width = visual viewport width

解释：第二条总结经验正是rem伸缩方案flexiblejs的核心思想，设置了initial-scale后浏览器会计算出视觉视口，继而将布局视口的值自动设置成视觉视口的值。达到在屏幕上完整呈现布局上的内容。

但是在同样的安卓原生浏览器上，不管我们将initial-scale设置成多少，浏览器都默认值为1。所以视觉视口和布局视口永远都等于1 * ideal viewport width这个问题的hack办法在flexible.js里也有所体现。

375px方案就解释到这里，至于为何是375而不是其他的值比如360、320等，可以参考移动端高清、多屏适配方案以及viewport-and-flexible.js， 在后篇文章中也有介绍3种视口的一些概念。

###rem方案

rem方案的目标也是用一套相同的度量标准适配所有屏幕大小的移动设备，在不同屏下进行正确的缩放。假设10rem宽在iphone5上是屏幕宽的一半，那么10rem在iphone6、iphone6plus、三星note等等机型上都显示为屏幕宽的一半。

我们知道rem所对应的px值是基于html标签上的font-size值进行换算的。若

html { font-size: 20px; } 10rem === 200px //true