无法使 MathJax 数学字体大小保持与周围文本相同的大小

Question

问题

我正在使用 MathJax 在我的页面上呈现数学：

注意数学字体如何大于其周围的文本——这是所期望的。但由于某种原因在移动设备上，数学字体变得很小：

我希望数学字体相对于其周围的文本保持相同的大小。或者至少，不会变得那么小。

MCVE...没有 M 和 V

我尝试在 JSFiddle 以及 onecompiler.com 中创建 MCVE，但我认为工具本身的某些内容会产生干扰，因为那里的数学字体的行为符合我的意愿。我正在使用 Chrome 开发者工具的“切换设备”功能来模拟移动视图，也许它不会影响显示结果的

<iframe>

。

MCVE

所以这是一个不太方便的 MCVE — 您必须自己保存并打开此页面：

<html lang="en" style="visibility: hidden;">
  <head>
    <meta charset="utf-8" />
    <title><?php echo $title; ?></title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cormorant:wght@300;700&display=swap" rel="stylesheet">
    <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 type="text/less">

      body {
        color: rgb(36, 36, 36);
        font-family: 'Cormorant', serif;
        font-weight: 300;
        font-size: 23px;
        line-height: 1.75;

        #container {
          max-width: 740px;
          margin: auto;
        }
      }

    </style>
  </head>
  <body>
    <div id="container">
      <article id="article">
_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:
      </article>
    </div>
    <!-- Markdown -->
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script>
      var article = document.getElementById('article');
      article.innerHTML = marked.parse(article.innerHTML);
    </script>
    <!-- CSS/LESS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/4.2.0/less.min.js" integrity="sha512-y2WgniVReZzVhOotEigpCJTu6Q6yGN0o8ezFzgS21PlWM1rqfSv7UPraV+IEDO9ljsli47Kr/toVOsukTVynuw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- Hides unstyled page until Markdown and LESS finishes processing. -->
    <script>
      window.addEventListener('load', function () {
        document.getElementsByTagName("html")[0].style.visibility = "visible";
      });
    </script>
  </body>
</html>

M 发生了什么？

我知道上面的内容看起来并不简单。但那是因为我认为（我的研究发现）这里可能有几个因素在起作用：

使用网络字体（Google 字体）。
MathJax 配置。（顺便说一句，这里有一个很棒的工具，可以将 MathJax V2 配置转换为 MathJaxV3 配置。大多数 Stack Overflow 答案都使用 V2 样式。）
使用 LESS 的内联 CSS。
Markdown 解析器，标记。（好吧，可能不是这个。但我将其包含在内，以便输出与我的屏幕截图相匹配。）

我尝试过的事情

我尝试使用
```
!important
```
样式强制数学字体保持不变（相对）：
```
/* mjx-math {
  font-size: 1.2em !important;
  font-size: 120% !important;
  font-size: 23px !important;
} */
```
显然不是同时的——我一一尝试过。我可以在 Chrome 的开发者工具中看到应用了最终样式is，但行为是相同的。

根据这个 Google Groups 主题的建议，我尝试在禁用

matchFontHeight

的情况下配置 MathJax：

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

我尝试设置此

<meta>

标签：

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

我尝试过其他几件事，但没有记录/已经忘记了。

GitHub 上有一个很长的讨论，可能可能相关，但我无法从中提取解决方案。

重新审视问题

所以我想我现在有两个问题。我似乎无法在 JSFiddle 和 OneCompiler 等工具中重现该问题。我最初的问题是——我无法让我的数学字体相对于它周围的文本保持相同的大小。

Answer 1

我在评论中建议尝试添加

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

查看文档

<head>

，因为这些缩放问题通常与移动设备缩放视口的方式有关，这可能会混淆 MathJax。

我说“帮助”不是“完全解决”，因为有了这个，整个页面在移动设备上的字体大小基本上增加了一倍

也许可以尝试一下

<meta content="width=device-width, initial-scale=.5" name="viewport"/>

看看这样是否更好？

您可以在

此处阅读有关此元标记的更多信息。您还可以尝试其他一些选项，例如使用 minimum-witdth

或

maximum-width

 代替

initial-width

，或者将

width

 设置为特定大小。我没有使用过这些，所以不知道哪种最适合您的情况。

无法使 MathJax 数学字体大小保持与周围文本相同的大小

问题描述投票：0回答：1

问题

MCVE...没有 M 和 V

MCVE

M 发生了什么？

我尝试过的事情

1个回答

最新问题

无法使 MathJax 数学字体大小保持与周围文本相同的大小

问题描述 投票：0回答：1

问题

MCVE...没有 M 和 V

MCVE

M 发生了什么？

我尝试过的事情

1个回答

最新问题

问题描述投票：0回答：1