相关文章
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