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

  • 相关阅读:
    【CYH-02】noip2018数论模拟赛:赛后题解
    C语言 malloc函数
    C 库函数
    C语言strcmp()函数:比较两个字符串
    C语言sprintf函数的深入理解
    C语言strcat()函数:字符串连接(拼接)
    liunx 中设置zookeeper 自启动(service zookeeper does not support chkconfig)
    页面上出现403错误,并解决
    Mac 下安装nginx
    nginx: [emerg] unknown directive "," in /usr/local/etc/nginx/nginx.conf:80
  • 原文地址:https://www.cnblogs.com/theWayToAce/p/7993070.html
Copyright © 2011-2022 走看看