900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 有些型号的华为手机使用rem时 内容会超出屏幕宽度的问题

有些型号的华为手机使用rem时 内容会超出屏幕宽度的问题

时间:2019-05-18 14:28:36

相关推荐

有些型号的华为手机使用rem时 内容会超出屏幕宽度的问题

解决某些型号手机在使用rem单位时,内容超出屏幕宽度问题

在H5手机页面上,用rem单位布局,配合js计算出一个根节点的font-size(原理是屏幕宽度乘以一个固定比例,如1/100),之后页面中所有的px全都换算成了rem单位来写,优点是能适配各种不同屏幕尺寸的手机。

但是 有些手机上rem单位计算不准! 计算后的值比正确值大。导致页面变形

解决办法

(function(win) {var docEl = win.document.documentElement,tid;function refreshRem() {var width = docEl.getBoundingClientRect().width;console.log("输出")console.log(width)var rem = width / 750 * 100; //以750px为原稿,除以100可得各元素的remdocEl.style.fontSize = rem + "px";var actualSize = parseFloat(window.getComputedStyle(docEl)["font-size"]);console.log("获取")console.log(actualSize)if (actualSize !== rem) {var remScaled = rem / (actualSize / rem);docEl.style.fontSize = remScaled + "px"}}function dbcRefresh() {clearTimeout(tid);tid = setTimeout(refreshRem, 100)}win.addEventListener("resize", function() {dbcRefresh()}, false);win.addEventListener("pageshow", function(e) {if (e.persisted) {dbcRefresh()}}, false);refreshRem();})(window);

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。