原因 当微信内修改默认字体大小或者开启微信内关怀模式,由于H5页面是在微信内置浏览器中打开,所以字体也会随之修改,导致页面布局改变。
解决方案 需要给安卓、ios同时添加配置,禁止内置浏览器修改H5页面。在vue中,我们给public文件夹下的index.html添加配置
安卓:
在script标签内添加方法,通过方法进行配置
(function () {
if (typeof WeixinJSBridge === 'object' && typeof WeixinJSBridge.invoke === 'function') {
handleFontSize()
} else {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', handleFontSize, false)
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', handleFontSize)
document.attachEvent('onWeixinJSBridgeReady', handleFontSize)
}
}
function handleFontSize () {
// 设置网页字体为默认大小
WeixinJSBridge.invoke('setFontSizeCallback', { fontSize: 0 })
// 重写设置网页字体大小的事件
WeixinJSBridge.on('menu:setfont', function () {
WeixinJSBridge.invoke('setFontSizeCallback', { fontSize: 0 })
})
}
})()
苹果: