针对近日华为,小米的部分机型,在升级系统或升级微信之后,微信内置浏览器产生的rem不能正确填充满的问题,有如下解决方案

目前来看,产生这个情况的原因是因为给html附font-size时,附上的font-size和实际上html的font-size 大小并不一致

如图:

在问题机型上展示的三个值 分别为 1.机型最终附给html的font-size大小  2.我想赋给html的font-size大小 3.二者的倍数

尝试找了多个问题机型,最终的比例都是1.25左右(1.24999),所以解决方案如下

//针对机型适配的代码就不贴了  网上随手一搜一堆 这里就针对特殊机型的处理展示一下
var docEl = doc.documentElement,
setFontSize = function() {
var clientWidth = document.documentElement.clientWidth,
timer;
if(!clientWidth) return;
       //原本对于html的字号设置 我这里用的是750的标准 ,640的也是同理
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';       
if(window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize) {
var size = window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize.split('p')[0];
          //这里再取出当前html的font-size,和你想附的值进行比较,
//这里为什么不直接用size< 原因是正常机型的size也不一定等于你想附的值,尝试了很多机型,除了问题机型外,一般差距很小,另一半完全相等;
  //为什么不直接*1.25 也不解释了 最终比例不一定是1.25
if(size*1.2 < 100 * (clientWidth / 750)) {
          //如果当前html的font-size 的1.2倍仍然小于 之前想设置的值,就说明是问题机型,给之前想附的值乘1.25倍,这样他会被系统再次除1.25得到的才是我们想附的值
docEl.style.fontSize = 125 * (clientWidth / 750) + 'px';
}
}
};

em。。。。大致上能看的明白吧

至于为什么会产生这个问题,目前还不清楚,可能是因为微信浏览器或者问题机型对于根字号的处理细节不一致,可能以后会处理,但暂时没有啥别的好方法,嗯

希望能给大家一些帮助,谢谢,转载请标明出处

华为,小米部分机型微信浏览器rem不适配的解决方案的更多相关文章

  1. 微信浏览器 video - android适配

    阶段一: 直接裸用 video 标签, 安卓 - 会重新弹一个播放层, 和之前video的父盒子错位, 要多丑有多丑, 体验要多烂有多烂. 阶段二: video添加以下属性, 安卓可实现内联播放, 但 ...

  2. 微信浏览器跳转浏览器下载app解决方案

    新版本微信浏览器中,已禁用下载APP应用,只支持打开微信合作商APP下载,所以无法通过微信浏览器直接下载APP应用.列举微信浏览器下载APP的种解决方案: 方案:通过Url 跳转到手机默认浏览器,或者 ...

  3. rem.js的用法及在浏览器端的适配

    首先介绍下自己,我是从后端转前端,对于前端的见识还不深望各位全当一个新手自述....... 随着移动设配的更新换代,市场上涌现了大量的非主流设备分辨率,比如华为手机...... 更新换代快的大前提下自 ...

  4. 微信浏览器是移动端的IE6?微信升级内核后Html5和CSS3兼容性总结

    今年4月,自从微信浏览器X5 升级Blink内核之后,各前端社区一片高潮,仿佛看到了前端er,眼含热泪进而抱头痛头的说:终于可以不用兼容这"移动端的IE6 "了,可以早点回家了!! ...

  5. 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 微信浏览器返回刷新,监听微信浏览器返回事件,网页防复制,移动端禁止图片长按和vivo手机点击img标签放大图片

    以下代码都经过iphone7,华为MT7 ,谷歌浏览器,微信开发者工具,PC端微信验证.如有bug,还请在评论区留言. demo链接:https://pan.baidu.com/s/1c35mbjM ...

  7. 大事记 - 安卓微信浏览器 video 标签层级过高

    // 为什么叫<大事记>? // 以前总有面试官问这样一个问题:“你在项目中遇到过最头疼的问题是什么,是怎么解决的?” // 当时总觉得,已解决的问题都算不上头疼,所以回答总是不尽人意. ...

  8. [bug]小米部分机型(5x、mix2)中,文字/背景闪现然后消失

    2/9更新 后来遇到float 元素也这样,改成flex布局就没问题.不知道具体原因. 描述: 使用vue 2.4开发HTML5时,遇到在小米部分机型(5x.mix2)中,文字/文字背景闪现然后消失. ...

  9. 这个meta标签会让华为mate10 pro自带浏览器无法粘贴手机收到的验证码信息

     前言 最近在项目中遇到一个问题,注册登录界面点击获取验证码,手机收到短信验证码后可以复制成功,但无法粘贴 让人郁闷的是在其它上手机上的(比如小米,苹果)默认浏览器和其它手机浏览器(比如QQ,夸克,搜 ...

随机推荐

  1. WPF 从零开始开发 dotnet Remoting 程序

    本文告诉大家如何不使用框架,从零开始开发一个 dotnet remoting 程序 在我的另一篇博客 WPF 使用RPC调用其他进程 就大概告诉了大家如何在 WPF 使用 dotnet remotin ...

  2. 2019-8-31-C#-控制台使用-UAC-权限

    title author date CreateTime categories C# 控制台使用 UAC 权限 lindexi 2019-08-31 16:55:58 +0800 2018-07-05 ...

  3. Vue中的computed和watch

    看了网上很多资料,对vue的computed讲解自己看的都不是很清晰,今天忙里抽闲,和同事们又闲聊起来,对computed这个属性才有了一个稍微比较清晰的认识,下面的文章有一部分是转自: https: ...

  4. javascript基础之循环

    //while循环 <script type="text/javascript"> i = 1; while (i <= 6) { document.write( ...

  5. 元组&字典&函数基础

    set: 类似dict, 是一组key的集合,不存储value 本质:无序和无重复元素的集合 创建: 创建set需要一个list或者tuple或者dict作为输入集合 重复元素在set中会自动被过滤 ...

  6. ios设备iframe无法滚动

    在使用IFRAME,你需要使用一个元素(如DIV)来包装他们 <div class="scroll-wrapper"> <iframe src="&qu ...

  7. win10 配置g++环境

    一.配置g++编译器的环境 1.将g++编译器的位置添加到环境变量path中,安装了C++ IDE的可以在IDE的安装目录下寻找 例如:C:\MySoftware\dev\Dev-Cpp\MinGW6 ...

  8. [reviewcode] 那些基础comments

    多次提醒我,为变量取个合适的名字, so cute person: Not a big deal, but try using variable names better than my_sa 每个参 ...

  9. HFile v2 v3文件结构

    http://blog.csdn.net/map_lixiupeng/article/details/40861791 http://blog.csdn.net/map_lixiupeng/artic ...

  10. docker 使用elasticsearch+logstash

    1.1部署elasticsearch:6.5.4 docker pull elasticsearch:6.5.4 docker run -d --name elasticsearch -p 9200: ...