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

wdzsjl 2周前 (01-01) 阅读数 61 #其它CMS

文章标签移动页面字体怎么设置移动页面字体怎么变大移动系统字体小怎么调 word移动字体设置中国移动的字体在手机哪里设置

微信在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后台。
- 进入“系统设置” -> “缓存管理”，点击“清空所有缓存”。
查看效果：
- 在微信中打开你的网站页面，检查字体大小是否已经不再被放大。