微信小程序中的H5網(wǎng)頁在關(guān)懷模式下頁面排版變亂的解決辦法
在開發(fā)當中呢，經(jīng)常會有很多H5的小活動頁面，需要在微信的環(huán)境下使用。偶爾會出現(xiàn)H5頁面在微信或者其他客戶端中出現(xiàn)字體變大的問題，下面提供解決方法
首先先把網(wǎng)頁自動放大放小的關(guān)掉。
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
安卓解決微信內(nèi)置瀏覽器打開字體變大問題的方法：
<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() {
// 設置網(wǎng)頁字體為默認大小
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
// 重寫設置網(wǎng)頁字體大小的事件
WeixinJSBridge.on('menu:setfont', function() {
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
});
}
})();
</script>
蘋果IOS系統(tǒng)解決微信內(nèi)置瀏覽器打開字體變大問題的方法：
/* IOS禁止微信調(diào)整字體大小 */
body {
-webkit-text-size-adjust: 100% !important;
text-size-adjust: 100% !important;
-moz-text-size-adjust: 100% !important;
}
參考來源：https://blog.csdn.net/weixin_63456913/article/details/128588384
浙公網(wǎng)安備 33010602011771號