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

问题描述:

在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!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值