相關文章

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>

手機淘寶flexible布局探索及最終方案