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里面有时候函数会不执行。

  • 相关阅读:
    CSU1018: Avatar
    ZOJ
    HDU—4463 Outlets 最小生成树
    查询文件中值所在的路径
    mysql语句查询时间检测
    phpmyadmin修改root密码
    检测Linux glibc幽灵漏洞和修补漏洞
    监控宝安装手册
    ubuntu安装环境软件全文档
    ubuntu mysql主从库的搭建
  • 原文地址:https://www.cnblogs.com/theWayToAce/p/7993070.html
Copyright © 2011-2022 走看看