移動端頁面字型在微信被放大，導致排版錯亂

黄文Rex發表於2024-10-22

微信在iOS和Android平臺上對網頁字型大小的調整機制不同，需要分別處理。以下是如何在PBootCMS中實現這一功能的詳細步驟：

1. 阻止iOS平臺上的字型放大

在PBootCMS的模板檔案中，找到header.html檔案（通常位於/template/你的模板名稱/目錄下），並在<head>標籤內新增以下CSS樣式：

<style>
body {
    -webkit-text-size-adjust: 100% !important;
}
</style>

2. 阻止Android平臺上的字型放大

同樣在header.html檔案中，新增以下JavaScript程式碼：

<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>

3. 上傳並測試

  1. 連線FTP伺服器：

    • 使用FTP客戶端（如FileZilla）連線到你的伺服器。

  2. 定位模板資料夾：

    • 導航到 /template/你的模板名稱/ 目錄。

  3. 編輯header.html檔案：

    • 下載header.html檔案到本地。
    • 使用文字編輯器開啟並新增上述CSS和JavaScript程式碼。

  4. 上傳修改後的檔案：

    • 將修改後的header.html檔案上傳回伺服器，覆蓋原有的檔案。

  5. 清空快取：

    • 登入PBootCMS後臺。
    • 進入“系統設定” -> “快取管理”，點選“清空所有快取”。

  6. 檢視效果：

    • 在微信中開啟你的網站頁面，檢查字型大小是否已經不再被放大。

注意事項

  • 備份檔案：在修改任何檔案之前，建議先備份原檔案，以防修改出錯後可以快速恢復。
  • 瀏覽器快取：有時候瀏覽器會快取舊的檔案，如果修改後沒有看到效果，可以嘗試清除瀏覽器快取或強制重新整理頁面（通常是按 Ctrl + F5）。
  • 測試裝置：確保在不同的裝置和作業系統上進行測試，以驗證字型大小調整是否有效。

透過以上步驟，你應該能夠在PBootCMS中成功阻止微信對網頁字型大小的調整。如果有其他問題或需要進一步的幫助，請隨時提問！

相關文章