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

最新推荐文章于 2022-07-05 16:29:45 发布

原创最新推荐文章于 2022-07-05 16:29:45 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #vue.js

H5 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种在H5手机页面上使用rem单位布局时遇到的问题及解决方案，针对某些手机上rem单位计算不准确导致的内容超出屏幕宽度问题，提供了一段JavaScript代码进行动态调整，确保页面在不同设备上的适配。

解决某些型号手机在使用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可得各元素的rem
					docEl.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);