摘要:
一、小米源码function(n) { var e = n.document, &n...
一、小米源码
function(n) { var e = n.document, t = e.documentElement, i = 720, d = i / 100, o = "orientationchange" in n ? "orientationchange": "resize", a = function() { var n = t.clientWidth || 320; n > 720 && (n = 720), t.style.fontSize = n / d + "px" }; e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))} (window);
小米按照720px的宽度去设置字体比例。
d = i / 100, //比例,通过这个比例去计算字体大小。
t.style.fontSize = t.clientWidth / d + "px" //通过实时获取的屏幕宽度除以比例 就是字体新的字体大小。意思就是客户端的宽度除以比例就是当前字体的大小,比如:720/(720/100)=100px, 100px为html上的字体大小。
rem 的设置是根据网站根元素去相对改变字体大小的,所以屏幕的宽度改变字体大小也跟着改变,其他div也是一样。
二、简单js代码设置
jsdocument.documentElement.style.fontSize = document.documentElement.clientWidth/6.4+"px";
三、meta缩放适配屏幕宽度
除了用rem适配之外,还有另一种更简单的宽度适配方式,通过meta标签去对屏幕缩放。
<script type="text/javascript">var phoneWidth = parseInt(window.screen.width);//获取屏幕的宽度var phoneScale = phoneWidth/750; //按750px算去比例var ua = navigator.userAgent; //根据各种系统机型去适配缩放,就可以保证在不容设备上看的效果都是一样的了。if (/Android (d+.d+)/.test(ua)){ var version = parseFloat(RegExp.$1); if(version>2.3){ document.write('<meta name="viewport" content="width=750, minimum-scale = '+phoneScale+',maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">'); }else{ document.write('<meta name="viewport" content="width=750, target-densitydpi=device-dpi">'); }}else{ document.write('<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi">');}</script>