华为P30等机型微信浏览器内rem比例不对问题

场景:华为手机微信浏览器中
使用的是 插件: flexible.js
解决方式如下:在flexible的refreshRem 函数中添加利用 getComputedStyle处理

  function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 540 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        /* 解决华为P30等机型微信浏览器内rem比例不对问题 start */
        var finalFontSize = parseFloat(window
                .getComputedStyle(docEl)
                .getPropertyValue("font-size"));
        var tempCoefficient = rem / finalFontSize;
        if (tempCoefficient !== 1) {
            var fontSizeCoefficient = tempCoefficient;
            docEl.style.fontSize = rem * fontSizeCoefficient + "px";
        }
        /* end */
        flexible.rem = win.rem = rem;
    }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问题:用rem写样式的时候,在所有设备上正常,但是在华为自带浏览器上显示是放大的。rem的js文件如下 let f...
    老周_o_o阅读 1,646评论 1 2
  • Nuxt爬坑 第一节:nuxt.js相关概述 nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作S...
    阿_军阅读 1,058评论 0 0
  • 简介 剖析流行的截图插件 html2canvas 的实现方案,探索其功能上的一些不足之处及不能正确截取的一些场景,...
    玄魂阅读 1,116评论 0 0
  • 文件名大小写问题 引用文件时,大小写输入错误,在windows环境下通常可以正常访问,但是安卓手机设备是linux...
    revert阅读 522评论 0 0
  • 今天感恩节哎,感谢一直在我身边的亲朋好友。感恩相遇!感恩不离不弃。 中午开了第一次的党会,身份的转变要...
    迷月闪星情阅读 10,617评论 0 11