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