zoukankan      html  css  js  c++  java
  • 解决华为手机用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里面有时候函数会不执行。

  • 相关阅读:
    2021 3 11 结队博客
    第一周 2021.03.07
    2021 3 5 知识点总结
    2021 3 3 每日总结
    2021 3 2 新学期的第一篇博客
    十天冲刺09
    二阶段之四
    安卓开发之实现手机验证码登录
    安卓布局(三)
    安卓布局(二)
  • 原文地址:https://www.cnblogs.com/theWayToAce/p/7993070.html
Copyright © 2011-2022 走看看