當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

移动端页面字体在微信被放大，导致排版错乱

發(fā)布時(shí)間：2023/12/2 编程问答 39 豆豆

生活随笔收集整理的這篇文章主要介紹了移动端页面字体在微信被放大，导致排版错乱小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

在開發(fā)微信頁面的時(shí)候，之前一直沒有測出這個(gè)問題。直到某天領(lǐng)導(dǎo)的手機(jī)出現(xiàn)了排版錯(cuò)位的問題，拿著手機(jī)質(zhì)問我的工作態(tài)度。
Google了一下發(fā)現(xiàn)原來微信調(diào)整了字體大小會(huì)放大網(wǎng)頁的字體，導(dǎo)致排版混亂。通過設(shè)置可以禁止網(wǎng)頁字體被放大：

<body style="-webkit-text-size-adjust: 100%!important;">@RenderBody()<script type="text/javascript">(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 });});}})();</script> </body>

@RenderBody() 請忽略

這樣網(wǎng)頁就沒問題了，至少目前看來。

參考文章《禁用微信 webview 調(diào)整字體大小》

The end... ?? Last updated by: Jehorn, May 18, 2018, 04:12 PM

總結(jié)

以上是生活随笔為你收集整理的移动端页面字体在微信被放大，导致排版错乱的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：深入css布局 (1) — 盒模型元
下一篇：移动端学习目录