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

解决华为手机用rem单位,内容超出屏幕宽度问题的更多相关文章

  1. html 手机web超出屏幕宽度的内容不换行,并产生横向滚动条

     html 手机web超出屏幕宽度的内容不换行,并产生横向滚动条 white-space: nowrap;overflow-x: scroll;    

  2. 解决 android 高低版本 webView 里内容 自适应屏幕的终极方法

    转载请声明出处(http://www.cnblogs.com/linguanh/) 一,先说下我的情况,大家可以对号入座(嫌无聊请跳过) 我的项目要求是这样的,先从数据库里面拿出来html标签,因为加 ...

  3. 解决华为手机无法输出Debug级别log的问题

    近期购入了新款的华为手机荣耀8,手感.性能.颜值都非常好.作为android开发工程师,自然会用到真机进行日常的调试.然而,这部手机并没有这么“听话“!反复尝试开启开发者选项中的设置项,依旧无法输出L ...

  4. 解决华为手机不出现logcat日志的问题

    问题描写叙述:公司一部华为手机在连接Eclipse时在Logcat中看不到相关日志 解决方法:1 进入手机拨号界面2 输入*#*#2846579#*#*3 输入完成后自己主动跳转到測试界面4 依次选择 ...

  5. 解决华为手机图片选择无效及产生的open failed: EACCES (Permission denied)错误

    在华为手机上调起图片选择时原来的效果如下 原来的代码是 Intent intent = new Intent(); intent.setAction(Intent.ACTION_GET_CONTENT ...

  6. MAR 27 解决华为手机访问Google Play:从服务器检索信息时出错。[DF-DFERH-01]

    虽然路由器已经设置了梯子,但是用华为手机访问Google Play时,还是提示:从服务器检索信息时出错.[DF-DFERH-01].   虽然在手机上把梯子设置成全局模式,连接Google Play后 ...

  7. Html内容超出标记宽度后自动隐藏

    我们在显示长文本时,往往需要去在C#端去截取字符,但这绝对不是一个好方面,因为我们的长文本往往都是代HTML标记的,你一个载不好,就会出现乱码问题(出现半个HTML标记),而比较好的作法就是通过CSS ...

  8. 当div元素内的内容超出其宽度时,自动隐藏超出的内容

    word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ te ...

  9. 解决华为手机不打印Log信息的问题

    在之前安装了Android Studio后,发现了一个很苦恼的事情,就是在程序中的写Log语句,不能正常的在Logcat中打印出来,这对于解决程序bug真是一刀切断,让人无从下手,在各种尝试后,首先我 ...

随机推荐

  1. ArcFaceDemo 第二版【C#】——视频人脸识别

    啥话不说,不用跪求,直接给下载地址:http://common.tenzont.com/comdll/arcface2demo.zip(话说附件的大小不限制,还是说我的文件太大,实际上确实有点大,60 ...

  2. .Net并行编程 - 并行任务基础知识

    在微软的.NET Framework中,任务是通过System.Threading.Tasks命令空间中的Task类来实现的.它的静态属性Task.Factory是TaskFactory类的一个实例, ...

  3. POJ 1696 Space Ant(凸包变形)

    Description The most exciting space discovery occurred at the end of the 20th century. In 1999, scie ...

  4. appcan打包后产生的问题总结

    以appcan为基础的项目,最终需要打包后进行调试.在调试过程中,主要的样式问题在苹果手机上,下面将这些问题总结起来,以防下次再犯. 1:ios 7 以上的手机中,状态栏与内容重叠: 问题描述:在io ...

  5. 如何在Python 2.X中也达到类似nonlocal关键字的效果

    nonlocal关键字时Python 3.X中引入的,目的是让内层函数可以修改外层函数的变量值,而该关键字在Python 2.X中是不存在的.那么,要在Python 2.X中达到类型达到类似nonlo ...

  6. C语言中的字符串分割函数

    char *strtok(char *s, const char *delim); 分解字符串为一组字符串.s为要分解的字符串,delim为分隔符字符串. 从s开头开始的一个个被分割的串.当没有被分割 ...

  7. [core python programming]chapter 7 programming MS office

    excel.pyw会有问题,解决如下: 因为python3x中没有tkMessageBox模块,Tkinter改成了tkinter你可以查看你的py当前支持的模块.在交互式命令行下输入>> ...

  8. 九度oj 题目1495:关键点

    题目描述: 在一个无权图中,两个节点间的最短距离可以看成从一个节点出发到达另一个节点至少需要经过的边的个数. 同时,任意两个节点间的最短路径可能有多条,使得从一个节点出发可以有多条最短路径可以选择,并 ...

  9. python循环解码base64

    第一次写博客,都不知道该如何下手,写的不是很好,还望各位大佬不要喷我. 先来介绍一下base64: Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,Base64就是一种基于64个可打 ...

  10. [BinaryTree] 最大堆的类实现

    堆的定义: 最大树(最小树):每个结点的值都大于(小于)或等于其子结点(如果有的话)值的树.最大堆(最小堆):最大(最小)的完全二叉树. 最大堆的抽象数据结构: class MaxHeap { pri ...