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

微信在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. 上传并测试

连接FTP服务器：
- 使用FTP客户端（如FileZilla）连接到你的服务器。
定位模板文件夹：
- 导航到 /template/你的模板名称/ 目录。
编辑header.html文件：
- 下载header.html文件到本地。
- 使用文本编辑器打开并添加上述CSS和JavaScript代码。
上传修改后的文件：
- 将修改后的header.html文件上传回服务器，覆盖原有的文件。
清空缓存：
- 登录PBootCMS后台。
- 进入“系统设置” -> “缓存管理”，点击“清空所有缓存”。
查看效果：
- 在微信中打开你的网站页面，检查字体大小是否已经不再被放大。

注意事项

备份文件：在修改任何文件之前，建议先备份原文件，以防修改出错后可以快速恢复。
浏览器缓存：有时候浏览器会缓存旧的文件，如果修改后没有看到效果，可以尝试清除浏览器缓存或强制刷新页面（通常是按 Ctrl + F5）。
测试设备：确保在不同的设备和操作系统上进行测试，以验证字体大小调整是否有效。

通过以上步骤，你应该能够在PBootCMS中成功阻止微信对网页字体大小的调整。如果有其他问题或需要进一步的帮助，请随时提问！

posted @ 2024-10-22 08:36 黄文Rex 阅读(96) 评论(0) 编辑收藏举报

黄文博客

⚡️不积跬步无以至千里，不积小流无以成江河。

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

1. 阻止iOS平台上的字体放大

2. 阻止Android平台上的字体放大

3. 上传并测试

注意事项

公告

搜索

常用链接

最新随笔

我的标签

随笔分类 (33017)

随笔档案 (10563)

文章分类 (353)

文章档案 (192)

相册 (466)

阅读排行榜

推荐排行榜