原因 當(dāng)微信內(nèi)修改默認(rèn)字體大小或者開啟微信內(nèi)關(guān)懷模式,由于H5頁面是在微信內(nèi)置瀏覽器中打開,所以字體也會隨之修改,導(dǎo)致頁面布局改變。
解決方案 需要給安卓、ios同時添加配置,禁止內(nèi)置瀏覽器修改H5頁面。在vue中,我們給public文件夾下的index.html添加配置
安卓:
在script標(biāo)簽內(nèi)添加方法,通過方法進(jìn)行配置
(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 () {
// 設(shè)置網(wǎng)頁字體為默認(rèn)大小
WeixinJSBridge.invoke('setFontSizeCallback', { fontSize: 0 })
// 重寫設(shè)置網(wǎng)頁字體大小的事件
WeixinJSBridge.on('menu:setfont', function () {
WeixinJSBridge.invoke('setFontSizeCallback', { fontSize: 0 })
})
}
})()
蘋果: