相关文章
http://blog.csdn.net/junreycen/article/details/51261653
http://www.html-js.com/article/2402
https://segmentfault.com/a/1190000004403496
https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html?utm_source=tuicool&utm_medium=referral
关于width=device和initial-scale
layout-viewport的宽度就是文档元素HTML的宽度，用docEl.getBoundingClientRect().width计算
浏览器的宽度是基于layout-viewport的宽度比例来的（看网页缩放的情况），由window.innerwidth计算（或者用idea viewport根据缩放比例来算）
width=device作用是让layout-viewport和浏览器宽度保持一致
当不设置width=device时：
1.不设置initial-scale，不设置maximum-scale=x minimum-scale=x，则layout-viewport默认为980px，但是安卓会自动缩放网页使得浏览器宽度和layout宽度一致，此时浏览器宽度也为980px，ios也会自动缩放网页，但是缩放结果依然是大于浏览器宽度
2.不设置initial-scale, 但用maximum-scale=1 minimum-scale=1禁止自动缩放，此时网页无缩放，layout为980px ，浏览器窗口宽度计算结果为idea viewport的宽度。
3.不设置initial-scale，但用maximum-scale=x minimum-scale=x x不等于1 来缩放网页，安卓端，当x<=1/dpr,浏览器宽度和layout-viewport永远为980px ios端当浏览器宽度计算结果>=980px时，layout-viewport会自动变为和浏览器宽度一致。其余情况安卓和ios，layout-viewport为980px
4.设置initial-scale后（maximum-scale=x minimum-scale=x 设置与否，无所谓)
，ios端layout-viewport就会默认和浏览器宽度一致（以idea viewport为基础计算），安卓端 当initial-scale=1时layout-viewport就会和浏览器宽度一致，当initial-scale不等1时，还是和情况3一样
（其实安卓端设置maximum-scale=x minimum-scale=x和设置initial-scale是一回事，都是按照idea viewport为基础缩放网页，iso端设置initial-scale后，layout-viewport就会默认和浏览器宽度一致，并且以idea viewport为基础计算）
当设置width=device时，
1.不设置initial-scale，不设置maximum-scale=x minimum-scale=x，安卓端，layout viewport=idea viewport，浏览器宽度=idea viewport。ios端 ，网页会放大，layout viewport=idea viewport，浏览器宽度小于idea viewport。
2.不设置initial-scale，设置maximum-scale=1 minimum-scale=1，安卓端和ios端一致，layout viewport=idea viewport，浏览器宽度=idea viewport
3，不设置initial-scale，设置maximum-scale=x minimum-scale=x，当x<1时，安卓端和ios端一致，layout viewport=浏览器宽度（用idea viewport根据缩放比例来算），当x>1时，安卓端和ios端一致，layout viewport=idea viewport，浏览器宽度小于layout宽度。
4.设置initial-scale，不设置maximum-scale=x minimum-scale=x，当initial-scale>=1时，安卓端和ios端一致，layout viewport=idea viewport，浏览器宽度=idea viewport
,当1>initial-scale>1/dpr时，安卓端，layout viewport=浏览器宽度（用idea viewport根据缩放比例来算），ios端，layout viewport用idea viewport根据缩放比例来算，浏览器宽度大于或者小于layout宽度。当initial-scale<=1/dpr,安卓端，layout viewport用idea viewport根据缩放比例来算，浏览器宽度小于layout宽度。ios端layout viewport=浏览器宽度（用idea viewport根据缩放比例来算
5.设置initial-scale，设置maximum-scale=x minimum-scale=x，当initial-scale=1，x=1时，安卓端和ios端一致，layout viewport=idea viewport，浏览器宽度=idea viewport
当initial-scale=x<1 时，安卓端和ios端一致layout viewport=浏览器宽度（用idea viewport根据缩放比例来算），当initial-scale=x>1 时layout viewport=idea viewport,浏览器宽度小于idea viewport。
总结：淘宝flexible 采用的方案是，不设置width=device，设置initial-scale=x，maximum-scale=x minimum-scale=x，并且安卓端x=1，ios端x<=3;
rem缩放布局js （在需要添加缩放标签的地方添加一下代码），注意用rem值得行高撑起盒子可能会出现一些高度不正常的现象，解决办法就是height和line-height都写出来
<script>
/*采用flexible方案布局*/
var rem;
var setDpr,scale;
var docEle=document.documentElement;
var browserInfo=window.navigator.userAgent;
var dpr=window.devicePixelRatio;
var isIphone=/iphone/i.test(browserInfo);
var isIOS9_3=isIphone && /OS 9_3/.test(browserInfo);
setDpr = isIphone && !isIOS9_3 ? dpr>= 3 ? 3 : dpr >= 2 ? 2 : 1 : 1;
scale=1/setDpr;
metaEle=document.createElement("meta");
metaEle.name="viewport";
metaEle.content="initial-scale="+scale+" maximum-scale="+ scale + " minimum-scale="+ scale + " user-scalable=no";
if(docEle.firstElementChild){
docEle.firstElementChild.appendChild(metaEle);
}else {
var wrap = document.createElement(‘div‘);
wrap.appendChild(metaEle);
document.write(wrap.innerHTML);
}
function refreshRem() {
var width=docEle.getBoundingClientRect().width;
width=(width/setDpr>540) ? 540*setDpr : width;
rem=width/10;
docEle.style.fontSize=rem+"px";
docEle.setAttribute(‘data-dpr‘, setDpr);
}
refreshRem();
</script>
原文地址：https://www.cnblogs.com/mei123/p/8467192.html