【微信小程序-适老化】WebView怎么不跟随微信字体改变，保持原样呢？

Question

加上这段js以及css仍旧不生效

-webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;

if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
        handleFontSize();
    } else {
      if (document.addEventListener) {
        document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
      } else if (document.attachEvent) {
        //IE浏览器，非W3C规范
        document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
      }
    }
    function handleFontSize() {
      // 设置网页字体为默认大小
      WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
      // 重写设置网页字体大小的事件
      WeixinJSBridge.on('menu:setfont', function() {
        WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
    });

Answer 1

晚上好🌙🌙🌙
本答案参考通义千问

在微信小程序中，WebView 组件默认会跟随系统或微信的字体大小设置进行缩放，这可能会导致页面布局错乱、文字显示不一致等问题。你提到的 CSS 样式和 JS 代码是为了防止这种自动缩放行为，但仍然不生效，可能是由于以下原因：

---

✅ 问题原因分析

1. 微信小程序 WebView 的限制
   微信小程序中的 WebView 是基于浏览器内核实现的，但它对某些 CSS 属性的支持有限，特别是与字体缩放相关的属性（如 text-size-adjust）可能被忽略。

2. JS 逻辑未正确触发
   你的 JavaScript 代码虽然尝试监听 WeixinJSBridgeReady 事件并调用 setFontSizeCallback，但在小程序中，WeixinJSBridge 可能并不完全支持或存在兼容性问题。

3. CSS 样式优先级或覆盖问题
   你添加的样式可能没有被正确应用，或者被其他样式覆盖。

---

✅ 解决方案（详细步骤）

1. 使用 wx.setStorageSync 设置字体大小（推荐）

你可以通过小程序 API 控制 WebView 内部的字体大小，而不是依赖 CSS 或 JS 操作。

// 在小程序页面的 JS 文件中
Page({
  onLoad() {
    // 设置 WebView 的字体大小为默认值
    wx.setStorageSync('fontSize', '16px'); // 设置默认字体大小
  }
});

然后在 WebView 中通过 JS 获取该值并应用到页面上。

---

2. 在 WebView 页面中使用 JS 动态设置字体大小

在 WebView 加载的 HTML 页面中，可以添加如下 JS 代码，用于强制固定字体大小：

<script>
  // 监听小程序传递的字体大小
  window.addEventListener('message', function(e) {
    if (e.data.fontSize) {
      document.body.style.fontSize = e.data.fontSize;
    }
  });

  // 设置默认字体大小
  document.body.style.fontSize = '16px';
</script>

---

3. 在小程序中通过 postMessage 传递字体大小信息

在小程序中调用 WebView 的 postMessage 方法，将字体大小传给 WebView 页面：

const webViewContext = this.selectComponent('#webView');
webViewContext.postMessage({
  fontSize: '16px'
});

---

4. 避免使用 text-size-adjust（不推荐）

虽然你在 CSS 中设置了 text-size-adjust: 100% !important;，但这个属性在部分浏览器中（包括微信内置浏览器）不被支持，因此无效。

---

5. 确保 WeixinJSBridge 事件正确触发

如果你仍希望使用 WeixinJSBridge 来控制字体，需确保以下几点：

• 确保 WebView 页面是通过 <web-view> 标签加载的。
• 确保页面是通过微信公众号或小程序内打开的，而非直接在浏览器中打开。

修改后的 JS 示例：

if (typeof WeixinJSBridge === "object" && typeof WeixinJSBridge.invoke === "function") {
  handleFontSize();
} else {
  document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
}

function handleFontSize() {
  WeixinJSBridge.call('hideOptionMenu');
  WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 });
}

---

✅ 总结：关键步骤列表

1. 在小程序中使用 wx.setStorageSync 存储字体大小
2. 在 WebView 页面中通过 JS 动态设置字体大小
3. 使用 postMessage 将字体大小从小程序传递到 WebView
4. 避免使用 text-size-adjust，改用 JS 动态设置
5. 确保 WeixinJSBridge 事件正确触发（如需使用）

---

✅ 最终建议

如果只是为了适老化设计，推荐使用 动态设置字体大小 + 自定义样式 的方式，而不是依赖 text-size-adjust 或 WeixinJSBridge，因为这些方法在小程序环境中可能存在兼容性问题。

如有需要，我可以提供完整的示例代码或项目结构。