一、问题描述
在做移动端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( ̄▽ ̄)do
更多推荐
微信内置浏览器及华为小米QQ浏览器关于使用rem的兼容性问题解决
发布评论