解决手机自带浏览器上，用rem单位，内容超出屏幕宽度问题！（rem计算不准）
问题描述：在H5手机页面上，用rem单位布局，配合js计算出一个根节点的font-size（原理是屏幕宽度乘以一个固定比例，如1/100），之后页面中所有的px全都换算成了rem单位来写，优点是能适配各种不同屏幕尺寸的手机，不需要写媒体查询！例如：设计稿是750px，用js计算出来的根节点font-size是100px（证明此时屏幕宽度是750px），那最外层的容器宽度就写成7.5rem（计算
·
问题描述：
在H5手机页面上，用rem单位布局，配合js计算出一个根节点的font-size（原理是屏幕宽度乘以一个固定比例，如1/100），之后页面中所有的px全都换算成了rem单位来写，优点是能适配各种不同屏幕尺寸的手机，不需要写媒体查询！ 例如：设计稿是750px，用js计算出来的根节点font-size是100px（证明此时屏幕宽度是750px），那最外层的容器宽度就写成7.5rem（计算成像素也是750），正常情况下是内容宽度就会和屏幕宽度一样。然而某款华为手机、自带的浏览器下，最外层的容器宽度就会比屏幕宽度要宽，横向竟然可以滚动！！！ 经过各种调试，找出了问题的根本， 华为自带浏览器上rem单位计算不准！ 计算后的值比正确值大了。
解决方案：
一、项目还没开始做
用到rem布局就会出现这种问题，所以开始布局的时候宽度不要用rem布局，首先考虑百分比布局，然后考虑弹性盒布局，避免这种情况出现
二、项目进入测试
这样的话，考虑上一步解决可行度，不行的话考虑以下：
1、计算出最外层容器（或者某个宽度自己试试）是否大于屏幕宽度。2、如果大于、计算误差的比例。3、直接重置根节点的font-size！
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)