解决移动端适配rem单位在华为和三星手机出现bug
代码已上传至github
github代码地址：https://github.com/Miofly/mio.git
最近发现之前写的移动端适配在部分华为或者三星手机上rem单位总是不兼容。然后就开始百度解决。发现部分华为手机确实要比其他的大。
解决方法如下：
代码的中的375px是根据UI给出的设计图写的，如果是750的设计图就把所有的375数值都改成750即可。
最后根据UI给出的px单位除以一百得到rem的单位就可以适配移动端了。
<script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 375) {
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
}
var html = document.getElementsByTagName('html')[0];
var settedFs = settingFs = parseInt(100 * (clientWidth / 375));
var whileCount = 0;
while (true) {
var realFs = parseInt(window.getComputedStyle(html).fontSize);
var delta = realFs - settedFs;
//不相等
if (Math.abs(delta) >= 1) {
if (delta > 0)
settingFs--;
else
settingFs++;
html.setAttribute('style', 'font-size:' + settingFs + 'px!important');
} else
break;
if (whileCount++ > 100)
break
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>在实际开发时最好给body一个默认的font-size，防止个别字体很大
<body style="font-size: 0.05rem">
<div id="app">
</div>
</body>本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-05-08，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
