原因 當微信內修改默認字體大小或者開啟微信內關懷模式,由于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 })
})
}
})()
蘋果: