华为,小米部分机型微信浏览器rem不适配的解决方案

更新日期: 2019-12-23阅读: 3.1k标签: rem

针对近日华为,小米的部分机型,在升级系统或升级微信之后,微信内置浏览器产生的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。。。。大致上能看的明白吧

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

原文:https://www.cnblogs.com/Lmey/p/12218444.html


链接: https://www.fly63.com/article/detial/7369

适用于移动设备弹性布局的js脚本(rem单位)

目前,随着移动设备的普及和4G网络的普及,web在移动端的占比已经远远超过PC端,各种H5页面推广页面,H5小游戏热度火爆。以前简单的使用px单位(没有弹性)的时代已经无法满足各位设计师和用户了

rem布局完成响应式开发,通俗且详细的原理解析和代码实现

rem可以理解为一个长度单位,单位rem的值等于网页font-size的值。如果网页的字体大小为默认值16px,那么1rem就等于16px,0.5rem等于8px。根据这个原理,如果网页默认的字体大小改变,那么单位rem的大小也会改变

移动端适配flexible rem布局方案

如果你看了很多篇文章,对 flexible 的解决方案一直还有一种不太了解的朦胧感觉,那么这篇文章会帮你从背景角度一步一步解析为何会有 flexible 这套解决方案,以及这套解决方案是如何作用的。

移动端rem适配

1:css3的media query来实现适配,例如下面这样;2.通过js动态设置html字体,例如下面这样:默认设计图为640的情况下1rem=100px;根据自己需求修改

rem js相关

规则就是,调用函数,放两个参数,第一个参数,是设计稿的宽度,第二个参数是px与rem的转换比例,通常会写100(因为好算);当然了,要把这段js代码最好封装在一个单独的js文件里,并且放在所有的css文件引入之前加载

小程序如何实现rem?

最近在学习小程序,要把html的代码转换成小程序界面,其中就遇到了rem的转换问题,但小程序不太兼容rem,不是不能用rem,而是没办法设置根元素的font-size,因为rem是相对于根元素的font-size

css rem应用

根据设计稿的实际宽度值,与设计稿最大宽度值,动态计算根字体大小,适应不同的屏幕比例。本文的px转rem换算公式为:100px = 1rem

css中1px等于多少rem?

rem是CSS3中新增加的一个单位值,他和em单位一样,都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算;rem是相对于根元素html的font-size进行计算。rem 和 em 一样,也是一个相对大小的值,它是相对于根元素 <html>。

了解并使用 CSS 中的 rem 单位

今天我们深度了解一下 rem 单位,这个单位目前已经得到了优秀浏览器的支持,并且有一些兼容方案来帮助你在低版本的 IE 浏览器中的使用它。

rem是如何实现自适应布局的?

rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高。本文讲的是如何使用rem实现自适应。 rem这是个低调的css单位,近一两年开始崭露头角

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!