【单位换算器手机版】解决华为手机自带浏览器上 用rem单位 内容超出屏幕宽度问题!(rem计算不准)

2017/6/26 19:34:51

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

【单位换算器手机版】解决华为手机自带浏览器上 用rem单位 内容超出屏幕宽度问题!(rem计算不准)

例如:设计稿是640px,用js计算出来的根节点font-size是100px(证明此时屏幕宽度是640px),那最外层的容器宽度就写成6.4rem(计算成像素也是640),正常情况下是内容宽度就会和屏幕宽度一样。

【单位换算器手机版】解决华为手机自带浏览器上 用rem单位 内容超出屏幕宽度问题!(rem计算不准)

然而某款华为手机、自带的浏览器下,最外层的容器宽度就会比屏幕宽度要宽,横向竟然可以滚动!!! 前言: 在上一家公司做H5页面的时候,就发现过这个问题,不过当时没有考虑这么多,加上页面比较简单,把rem单位换成了100%,成功解决,哈哈(成功偷懒!

【单位换算器手机版】解决华为手机自带浏览器上 用rem单位 内容超出屏幕宽度问题!(rem计算不准)

) 这次做的页面比较复杂,类似于一个双十一活动主会场一样,公司的测试人员拿自己手机测了一下,出现了这个问题,我当时以为是老手机才有这个问题,于是很骄傲的跟他说:华为的某一款老手机上才会有这个问题!

【单位换算器手机版】解决华为手机自带浏览器上 用rem单位 内容超出屏幕宽度问题!(rem计算不准)

但是一问才知道,他的手机是3个月前买的。。。 好吧,废话不多说了。 经过各种调试,找出了问题的根本,华为自带浏览器上rem单位计算不准!

【单位换算器手机版】解决华为手机自带浏览器上 用rem单位 内容超出屏幕宽度问题!(rem计算不准)

计算后的值比正确值大了。 然后开始想解决方案,当时想到了第一种方案,用css3把body整个缩小,比例就是华为浏览器上放大的比例,这样界面上看起来就正常了~ 实验过后发现这种方法可行,加班了半天、下班走人。

【单位换算器手机版】解决华为手机自带浏览器上 用rem单位 内容超出屏幕宽度问题!(rem计算不准)

但是随之带来了另外两个问题: 1、缩小后body的高度也缩小了,但是页面高度并没有缩小,所以页面底部会有一大片的空白区域。 2、使用css3的scale后,所有子元素的position:fixed全部失效,全部变成absolute了 so这个方案不行,第二天上班路上,突然灵机一动,想到了另一个方法: 1、计算出最外层容器是否大于屏幕宽度。

【单位换算器手机版】解决华为手机自带浏览器上 用rem单位 内容超出屏幕宽度问题!(rem计算不准)

2、如果大于、计算误差的比例。3、直接重置根节点的font-size! 尼玛完美解决!! 具体的代码我就不写出来了,大概思路是这样的~ 其实后续还有一些别的判断,比如先判断了是不是华为上的浏览器等......

【单位换算器手机版】解决华为手机自带浏览器上 用rem单位 内容超出屏幕宽度问题!(rem计算不准)