解决华为手机用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里面有时候函数会不执行。
解决华为手机用rem单位,内容超出屏幕宽度问题的更多相关文章
- html 手机web超出屏幕宽度的内容不换行,并产生横向滚动条
html 手机web超出屏幕宽度的内容不换行,并产生横向滚动条 white-space: nowrap;overflow-x: scroll;
- 解决 android 高低版本 webView 里内容 自适应屏幕的终极方法
转载请声明出处(http://www.cnblogs.com/linguanh/) 一,先说下我的情况,大家可以对号入座(嫌无聊请跳过) 我的项目要求是这样的,先从数据库里面拿出来html标签,因为加 ...
- 解决华为手机无法输出Debug级别log的问题
近期购入了新款的华为手机荣耀8,手感.性能.颜值都非常好.作为android开发工程师,自然会用到真机进行日常的调试.然而,这部手机并没有这么“听话“!反复尝试开启开发者选项中的设置项,依旧无法输出L ...
- 解决华为手机不出现logcat日志的问题
问题描写叙述:公司一部华为手机在连接Eclipse时在Logcat中看不到相关日志 解决方法:1 进入手机拨号界面2 输入*#*#2846579#*#*3 输入完成后自己主动跳转到測试界面4 依次选择 ...
- 解决华为手机图片选择无效及产生的open failed: EACCES (Permission denied)错误
在华为手机上调起图片选择时原来的效果如下 原来的代码是 Intent intent = new Intent(); intent.setAction(Intent.ACTION_GET_CONTENT ...
- MAR 27 解决华为手机访问Google Play:从服务器检索信息时出错。[DF-DFERH-01]
虽然路由器已经设置了梯子,但是用华为手机访问Google Play时,还是提示:从服务器检索信息时出错.[DF-DFERH-01]. 虽然在手机上把梯子设置成全局模式,连接Google Play后 ...
- Html内容超出标记宽度后自动隐藏
我们在显示长文本时,往往需要去在C#端去截取字符,但这绝对不是一个好方面,因为我们的长文本往往都是代HTML标记的,你一个载不好,就会出现乱码问题(出现半个HTML标记),而比较好的作法就是通过CSS ...
- 当div元素内的内容超出其宽度时,自动隐藏超出的内容
word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ te ...
- 解决华为手机不打印Log信息的问题
在之前安装了Android Studio后,发现了一个很苦恼的事情,就是在程序中的写Log语句,不能正常的在Logcat中打印出来,这对于解决程序bug真是一刀切断,让人无从下手,在各种尝试后,首先我 ...
随机推荐
- MyBatis 注解配置及动态SQL
一.注解配置 目前MyBatis支持注解配置,用注解方式来替代映射文件,但是注解配置还是有点不完善,在开发中使用比较少,大部分的企业还是在用映射文件来进行配置.不完善的地方体现在于当数据表中的字段 ...
- 线性代数之——正交矩阵和 Gram-Schmidt 正交化
这部分我们有两个目标.一是了解正交性是怎么让 \(\hat x\) .\(p\) .\(P\) 的计算变得简单的,这种情况下,\(A^TA\) 将会是一个对角矩阵.二是学会怎么从原始向量中构建出正交向 ...
- Simple layout
body { padding: 0; margin: 0; overflow: hidden; } div { display: block; position: relative; } .c ...
- 官方文档 恢复备份指南三 Recovery Manager Architecture
本节讨论以下问题: About the RMAN Environment 关于RMAN环境 RMAN Command-Line Client ...
- 小程序之web-view打开外部链接
小程序之web-view - 传送门 web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面.个人类型与海外类型的小程序暂不支持使用. 一:小程序使用web-view打开链接的前 ...
- vue移动音乐app开发学习(三):轮播图组件的开发
本系列文章是为了记录学习中的知识点,便于后期自己观看.如果有需要的同学请登录慕课网,找到Vue 2.0 高级实战-开发移动端音乐WebApp进行观看,传送门. 完成后的页面状态以及项目结构如下: 一: ...
- 软件功能说明书——Thunder团队
爱阅APP功能说明书 一.引言 相信大家都使用过电子书阅读器,相对于纸质版书籍电子书APP做到了环保.易存储.便携.因此我们Thunder团队开发了——爱阅APP,以下内容是Alpha版的功能说明书. ...
- Java接口与继承作业
为什么子类的构造方法在运行之前,必须调用父类的构造方法?能不能反过来?为什么不能反过来? 因为子类继承了父类,那么就默认的含有父类的公共成员方法和公共成员变量,这些方法和变量在子类里不再重复声明.如果 ...
- JAVA mysql数据库 配置
mysql 版本 5.7 数据库连接版本 <!--MySql--><dependency> <groupId>mysql</groupId> <a ...
- C#之WCF入门1—简单的wcf例子
第一步:创建一个空的解决方案,新建一个WCF服务应用程序项目(使用默认名字) 来模拟服务端,新建一个控制台应用程序项目(名称改为 ConsoleApp)来模拟客户端. 第二步:简单分析WcfServi ...