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

  • 相关阅读:
    Linq聚合操作之Aggregate,Count,Sum,Distinct源码分析
    Linq分区操作之Skip,SkipWhile,Take,TakeWhile源码分析
    Linq生成操作之DefautIfEmpty,Empty,Range,Repeat源码分析
    Linq基础操作之Select,Where,OrderBy,ThenBy源码分析
    PAT 1152 Google Recruitment
    PAT 1092 To Buy or Not to Buy
    PAT 1081 Rational Sum
    PAT 1084 Broken Keyboard
    PAT 1077 Kuchiguse
    PAT 1073 Scientific Notation
  • 原文地址:https://www.cnblogs.com/theWayToAce/p/7993070.html
Copyright © 2011-2022 走看看