解决华为手机用rem单位，内容超出屏幕宽度问题

在H5手机页面上，用rem单位布局，配合js计算出一个根节点的font-size（原理是屏幕宽度乘以一个固定比例，如1/100），之后页面中所有的px全都换算成了rem单位来写，优点是能适配各种不同屏幕尺寸的手机，不需要写媒体查询！
例如：设计稿是640px，用js计算出来的根节点font-size是100px（证明此时屏幕宽度是640px），那最外层的容器宽度就写成6.4rem（计算成像素也是640），正常情况下是内容宽度就会和屏幕宽度一样。
然而某款华为手机、自带的浏览器下，最外层的容器宽度就会比屏幕宽度要宽，横向竟然可以滚动！

经过各种调试，找出了问题的根本，华为自带浏览器上rem单位计算不准！计算后的值比正确值大了。

然后开始想解决方案，当时想到了第一种方案，用css3把body整个缩小，比例就是华为浏览器上放大的比例，这样界面上看起来就正常了
实验过后发现这种方法可行，加班了半天、下班走人。但是随之带来了另外两个问题：
1、缩小后body的高度也缩小了，但是页面高度并没有缩小，所以页面底部会有一大片的空白区域。
2、使用css3的scale后，所有子元素的position:fixed全部失效，全部变成absolute了

so这个方案不行，第二天上班路上，突然灵机一动，想到了另一个方法：
1、计算出最外层容器是否大于屏幕宽度。2、如果大于、计算误差的比例。3、直接重置根节点的font-size！尼玛完美解决！！

PS：注意：有时候其实没有那么麻烦，只要把你写的控制fontsize代码放到头部就好了，放在common.js里面有时候函数会不执行。

巴特西

解决华为手机用rem单位，内容超出屏幕宽度问题

最新文章

热门文章