MathJax数学字体大小无法与周边文本保持相对一致问题求助

我在网页中使用MathJax渲染数学公式，希望数学字体比周边文本更大，桌面端显示符合预期，但移动端上数学字体会随分辨率缩放，变得小到无法阅读，Chrome开发者工具模拟移动端视图、安卓手机实际访问均存在该问题。

以下代码复制到本地.html文件即可测试（在线平台因iframe环境无法复现该问题）：

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>MCVE</title>
    <script>
      MathJax = {
        tex: {
          inlineMath: [['$', '$']],
          displayMath: [['$$', '$$']],
        },
        chtml: {
          scale: 1.2,
        },
        svg: {
          scale: 1.2,
        }
      };
    </script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    <style>
      body {
        font-family: 'Arial', sans-serif;
        font-weight: 300;
        font-size: 23px;
        line-height: 1.75;
      }
    </style>
  </head>
  <body>
Our purpose is to study a certain feature of quantum mechanics as seen through a hypothetical device—this apparatus 𝒜. This device—modeled on a real device of course—has a strange behavior that gives rise to an interesting property we'd like to study. It's this: Once you prepare the device, i.e. put it in one of the situations $\ket{u}$, $\ket{d}$, $\ket{r}$, $\ket{l}$, $\ket{o}$, $\ket{i}$, if you then orient it on a different axis and take a reading, you'll get $+1$ half the time, and $-1$ the other half of the time—<em>despite setting up the same starting situation and re-orienting the device exactly the same way every time</em>. In other words, the measurement of the re-oriented situation appears to be non-deterministic. Let's create a new notation to depict this "re-oriented situation" so it's easier to talk about:
  </body>
</html>

• 使用!important强制设置mjx-math元素字体大小，分别尝试了1.2em、120%、23px，开发者工具显示样式已应用，但问题未解决：

mjx-math {
  font-size: 1.2em !important;
  font-size: 120% !important;
  font-size: 23px !important;
}

• 在MathJax配置中禁用matchFontHeight，无效：

chtml: {
  scale: 1.2,
  matchFontHeight: false,
},
svg: {
  scale: 1.2,
  matchFontHeight: false,
}

• 添加限制缩放的viewport元标签，未解决问题：

<meta name="viewport" content="initial-scale=0.9, maximum-scale=0.9">

还尝试过其他未记录的方案，参考过相关讨论也未找到可行解法。

方法1：动态调整MathJax缩放比例 #

MathJax的scale支持函数形式，可基于根元素字体大小动态计算缩放比例，适配移动端视口：

MathJax = {
  tex: {
    inlineMath: [['$', '$']],
    displayMath: [['$$', '$$']],
  },
  chtml: {
    scale: (node) => {
      const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
      // 以16px为基准，保持1.2倍的相对缩放，同时适配根元素字体变化
      return 1.2 * (rootFontSize / 16);
    },
    matchFontHeight: false
  },
  svg: {
    scale: (node) => {
      const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
      return 1.2 * (rootFontSize / 16);
    },
    matchFontHeight: false
  }
};

方法2：媒体查询强制移动端数学字体大小 #

针对移动端视口，直接给MathJax的容器元素设置最小字体大小，确保可读性：

@media (max-width: 768px) {
  mjx-container[mjx-container="true"] {
    font-size: 1.3em !important;
    min-font-size: 20px;
  }
}

选择mjx-container而非mjx-math，因为MathJax的容器是控制整体缩放的核心层级。

方法3：使用标准响应式viewport元标签 #

替换之前的viewport设置，确保页面在移动端正确适配：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

该标签让页面宽度匹配设备宽度，避免不必要的缩放导致字体被压缩。

内容的提问来源于stack exchange，提问作者Andrew Cheong