项目场景:
嵌入式微信H5页面已做适配,但是还会变形
问题描述:
很多时候做微信H5内嵌的时候会发现,已经做了适配但是有的手机就是会变形
原因分析:
我目前知道的原因是每个人微信字体不一致造成
解决方案:
安卓解决方案
setting () {
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
})
})
}
}
ios解决方案
body { /* IOS禁止微信调整字体大小 */
-webkit-text-size-adjust: 100% !important;
text-size-adjust: 100% !important;
-moz-text-size-adjust: 100% !important;
}