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


http://www.taodudu.cc/news/show-1996244.html

相关文章:

  • 华为BFD的配置规范
  • Vue中 引入外部字体并使用
  • Android WebView 网页使用本地字体
  • 华为emui3.1 android,华为EMUI3.1
  • Android加载自定义字体出错,盘点Android使用自定义字体遇到的坑
  • 华为、小米、OPPO三大厂商字体对比 这款更加舒适易读
  • 华为太极magisk安装教程_Magisk字体包制作、字体包导入及导入失败等详细教程
  • 华为手机更改系统默认字体
  • [娱乐]华为HWT文件手动修改字体名称
  • 华为手机楷体字体下载_正楷字体下载正楷字体官方下载[字体下载]-华军软件园...
  • 华为手机字体改简体_华为繁体字体怎么更换 华为手机字体改简体
  • 华为手机所有图标变黑_华为手机字体白色变黑色 华为图标字体怎么变黑
  • 华为的哪个字体像苹果的_华为手机手写怎么变字体 苹果手写字体怎么变粗
  • 华为手机字体改简体_华为字体买了之后改不了 华为手机字体改简体
  • 华为手机怎么设置字体?
  • HarmonyOS Sans - 华为把鸿蒙系统自带的字体开放给全社会免费商用了
  • ocjp真题
  • Oracle Java认证OCJP考试题库在哪找
  • OCJP随笔(5)
  • ORACLE认证考试之ocjp 考试题之五
  • 备考OCJP认证知识点总结(四)
  • 视频教程-OCJP认证考试复习课-其他
  • 如何通过OCJP认证考试
  • 备考OCJP认证知识点总结(三)
  • 备考OCJP认证知识点总结(一)
  • OCJP认证 | 国际上最热门的IT认证之一,开启你高级认证的钥匙
  • 申请OCJP
  • OCJP考试
  • ocjp认证的作用
  • OCJP之Console

解决华为手机用rem单位,内容超出屏幕宽度问题相关推荐

  1. 有些型号的华为手机使用rem时,内容会超出屏幕宽度的问题

    解决某些型号手机在使用rem单位时,内容超出屏幕宽度问题 在H5手机页面上,用rem单位布局,配合js计算出一个根节点的font-size(原理是屏幕宽度乘以一个固定比例,如1/100),之后页面中所 ...

  2. 不小心删除了华为手机备忘录里的内容如何恢复?

    ​不小心删除了华为手机备忘录里的内容,如果手机开着云服务功能,云端备忘录里该条内容也会被删除,无法找回! 小编一直都是用的华为手机,不管是功能还是外观,华为手机都质量过关,所以用了一部又换一部.小编后 ...

  3. Android:解决华为手机隐藏虚拟按键Activity被重新创建的问题

    解决华为手机隐藏虚拟按键Activity被重新创建的问题 问题描述 解决方法 分析 问题描述 在华为手机P9上 屏幕底部虚拟按键用户可以随时隐藏或显示,在改变后 返回上一页,会导致页面重新创建,页面操 ...

  4. Android 头像替换,解决华为手机取不到图片

    只用涉及到用户模块的App基本上就会用到头像替换的功能,类似的代码也是信手沾来,百度.GitHub以及各大论坛好博客一大把,随便粘过来就可以用了.但是...有坑.在华为荣耀手机上踩坑了,网上看了下问的 ...

  5. CSS------当内容超出div宽度后自动换行和限制文字不超出div宽度和高度

    原文:CSS------当内容超出div宽度后自动换行和限制文字不超出div宽度和高度 如图: 1.自动换行 <div style="widht:100%;height:100%;wo ...

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

    解决 android 高低版本 webView 里内容 自适应屏幕的终极方法 参考文章: (1)解决 android 高低版本 webView 里内容 自适应屏幕的终极方法 (2)https://ww ...

  7. 微信小程序 - 解决 rich-text 富文本解析图片无法自适应宽高问题(图片超出屏幕宽度且不受控)

    前言 注意:您无法通过直接指定 <img> 标签样式来试图设置为自适应图片. 使用官方 <rich-text> 富文本组件解析时, 当内容包含图片(大图)时显示的结果就会超出屏 ...

  8. 如何阻止华为杀应用_如何解决华为手机“杀后台”严重的情况呢?小技巧就能轻松搞定...

    大家好,我是鲍清,这里专注数码,相信有很多人都喜欢,小编来给你们推荐,大家可以收藏转发哦! iOS13.2Beta版本因为杀后台严重被我们诟病不已,而华为确实也存在这样的问题,可是华为这样做" ...

  9. 解决华为手机EMUI 9之后,GMS无法使用问题

    chrome,goolgle play,youtube 这几个经常用的app,在我某一天升级我的华为手机到emui9之后突然用不了了,一直试图解决,找了一堆gms安装器,都不好使.又不想破解boot ...

  10. 解决华为手机隐藏虚拟按键Activity被重启的问题

    引言 最近技术群里面的妹纸说:在华为手机上开发应用的时候,隐藏底部的虚拟按键Activity会被重启的问题,并且找不到问题所在,于是查查资料,发现问题解决起来蛮简单的. 问题描述 一开始觉得应该是代码 ...

最新文章

  1. java message bus_【Microsoft Azure学习之旅】消息服务Service Bus的学习笔记及Demo示例...
  2. 2016/01/13开始学习git:分支管理:Bug分支
  3. android面向数据库的的编程工具-OrmLite
  4. 设置联想电脑双屏显示(备用待查)
  5. checkbox对齐排列
  6. python批量生成word报告_python自动生成word报告 | 如何将现有的数据利用python 填入word的表格中?...
  7. python使用virtualenvwrapper
  8. Redis 排行榜 相同分数根据时间优先排行
  9. ios 的frame,bound,center
  10. Chrome开发者工具对于异常请求不显示Response内容
  11. WPF 控件专题 StackPanel控件详解
  12. 【RX解码MIPI输出】XS9922B 4通道模拟复合视频解码芯片 功能对标TP2815
  13. GetLastError 错误代码
  14. 读一封汶川地震的信:亲爱的,我要和别人结婚了
  15. 凸优化1——仿射集、凸集、锥
  16. 关于win10自带邮箱绑定163邮箱的设置
  17. 多目标蚁群算法路径规划(一)-----从数据设计到毕业论文系列
  18. 日语随记_(文本编辑*)
  19. STM8L051的硬件I2C调试
  20. 帕德逼近matlab算法,一种基于帕德逼近的通信误差函数逼近方法与流程

热门文章

  1. 英雄传奇-6.专用浏览器打不开.黑屏.白屏.插件丢失等怎么解决
  2. 大一c语言常见编程题,自己整理的C语言常见编程题
  3. 让VSCode字体性感起来
  4. stm32用tft-lcd 显示自定义大小的字体
  5. ccs6.0 破解版安装教程 Code Composer Studio安装教程
  6. 最完美的matlab绘图教程集合
  7. Tomcat下载安装以及配置(详细教程)
  8. CSDN内容变现渠道
  9. 国内几款通用论坛程序简介和比较
  10. 机器人学基础(一):空间描述与坐标变换