一、问题描述

在做移动端h5页面开发的时候，rem的使用简直是屏幕适配的利器，但是，它在也存在兼容性问题：

在微信内置浏览器及华为小米内置及QQ浏览器访问rem做的h5的时候，由于设置部分字体过小，以上浏览器为了满足浏览需要，强制限制了html最小字体，虽然我们代码设置了html,body的字号，但并未生效，从而影响了页面布局！

二、rem的使用

之前我已经整理过了如何使用rem的方法，这里只是为了解决bug，就不展开说明了：附：如何使用rem适配移动端及移动端适配的其他方法汇总

三、解决方法

此版本应用于 750px尺寸的 iOS 设计稿
rem计算方式：设计图尺寸px / 100 = 实际rem 【例: 100px = 1rem，1px = 0.01rem】

3.1 media.js复制即用

!function (window) {setTimeout(function () {/* 设计图文档宽度 */var docWidth = 750;var doc = window.document,docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';var recalc = (function refreshRem() {/* 窗口当前宽度 */var clientWidth = docEl.getBoundingClientRect().width;/* 页面宽度大于 750 时不再放大 */clientWidth = clientWidth > 750 ? 750 : clientWidth;var oldSize = (clientWidth / docWidth * 100) + 'px';docEl.style.fontSize = oldSize;/* 获取设置后的字体大小情况 - 因微信设置APP字体大小后会影响该设置 */var nowSize = window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize;var oldSizeValue = parseFloat(oldSize, 10);var nowSizeValue = parseFloat(nowSize, 10);/* 当差值大于1时重新按差比计算出正确的px值 */if ((nowSizeValue - oldSizeValue) > 1 || (nowSizeValue - oldSizeValue) < -1) {var diff = (oldSizeValue / nowSizeValue);docEl.style.fontSize = ((clientWidth / docWidth * 100) * diff) + 'px';}return refreshRem;})();/* 添加倍屏标识，安卓为1 */docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1);if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) {/* 添加IOS标识 */doc.documentElement.classList.add('ios');/* IOS8以上给html添加hairline样式，以便特殊处理 */if (parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8)doc.documentElement.classList.add('hairline');}if (!doc.addEventListener) return;window.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false);}, 0)
}(window);

3.2 关键代码思路分析

以上思路其实是在做个除法，举例说明：

本身设计图750px，dom宽度100px，在1比100的基础上根节点设置100px，当前dom设置1rem即可；
但由于浏览器问题，强制设置了根节点为120px，那我们代码中的1rem就变成了实际120px，页面就变大混乱了；
为了解决这个问题，那我们就需要把根节点100px变小，在当前浏览器缩放比例下也使1rem还是等于100px；
最终的根节点 /100px（最终dom宽度宽度） = 100px（原根节点size） / 120px（原根节点下dom宽度）
最终根节点为83.3px；

3.3 tips

使用rem的时候最好还是设置根节点大一些100px，不然太小了就会遇见这个问题。
移动端使用border设置时建议直接使用1px，不要0.01rem，太细也会不显示。
建议布局直接用flex弹性布局，具体宽度再使用rem；
为了防止设置根节点字体不生效，建议放置js在html的头部开始引用！

结语

以上就完成了微信内置浏览器及华为小米QQ浏览器关于使用rem的兼容性问题解决！
over~ 有问题留言
如果本文对你有帮助的话，请不要忘记给我一键三连打call哦~o(￣▽￣)ｄo

微信内置浏览器及华为小米QQ浏览器关于使用rem的兼容性问题解决相关推荐

转载--video标签在微信内置浏览器和QQ浏览器（手机端）的怪异现象
用H5做了一个新闻信息展示的网页,video标签总是处于最顶层,调节z-index的值不起作用,对于flash也是一样的情况,flash已设置wmode属性.在PC端和手机端大部分浏览器(360.小米 ...
linux的QQ浏览器里微信,移动端微信内置浏览器（或QQ浏览器）无法识别onclick事件的问题解决...
1.微信内置浏览器(或QQ浏览器或safari浏览器)无法识别onclick事件的解决对于这类不兼容的问题真的是很磨人,比较浪费时间,对于技术大牛可能不是问题,但是对于新手来说,可能就是个好几天无法 ...
判断是否qq或者微信内置浏览器
判断是否qq或者微信内置浏览器 *chrome wx,qq测试 ###安卓 QQ 内置浏览器 UA: Mozilla/5.0 (Linux; Android 5.0; SM-N9100 Build/L ...
微信内置浏览器第三方登录qq
网页应用首先肯定想到的是js sdk的方式引用qq登录接口,但是放在微信内置的浏览器中是不行的,因为微信和qq的内置浏览器都屏蔽了qq登录js,登录成功后都会出现无法正常跳转的情况,询问客服确认后,开 ...
360浏览器清除缓存_手机微信内置浏览器缓存清理指南
点击上方蓝字关注我们手机微信内置浏览器缓存清理指南各位老师,关于健康打卡系统有部分老师无法看到"每日测温"功能的问题,主要出现在用微信扫一扫打开系统时,这是由于微信内置浏览器的 ...
微信内置浏览器非全屏播放视频解析
前提条件,接了一个项目要实现在微信公众号里课程播放,而且还有评论功能,视频需要小窗播放. 首先公布解决方案: 感谢知乎上的回答,原版微信内置浏览器如何小窗不全屏播放视频? 感谢该问题的徐霖同学的回答 ...
微信内置浏览器video标签自动全屏播放以及层级过高问题
转载自:微信内置浏览器video标签自动全屏播放以及层级过高问题 - 程序员大本营今天事用html5的<video>标签做微信内置浏览器视频播放页面时,需要在视频层级上显示类似弹幕的对话 ...
微信内置浏览器非全屏播放视频解析 1
前提条件,接了一个项目要实现在微信公众号里课程播放,而且还有评论功能,视频需要小窗播放. 首先公布解决方案: 感谢知乎上的回答,原版[ 微信内置浏览器如何小窗不全屏播放视频?] 感谢该问题的徐霖同学 ...
微信内置浏览器的JsAPI(WeixinJSBridge续)[转载]
原文地址: http://www.baidufe.com/item/f07a3be0b23b4c9606bb.html 之前有写过几篇关于微信内置浏览器(WebView)中特有的Javascript ...

微信内置浏览器及华为小米QQ浏览器关于使用rem的兼容性问题解决