提问人：Andrew Cheong 提问时间：10/29/2023 最后编辑：Andrew Cheong 更新时间：11/5/2023 访问量：89
无法让 MathJax 数学字体大小相对于周围的文本保持相同的大小
Can't get MathJax math font size to stay same size relative to surrounding text
问：
问题
我正在使用 MathJax 在我的页面上呈现数学：
如上所示，我希望数学字体大于其周围的文本。但是由于某种原因，在移动设备上，数学字体会随着分辨率而缩放，并且变得小得无法阅读。我正在使用 Chrome 的开发者工具来模拟移动视图，但我可以确认它在我的 Android 手机上是一样的：
MCVE的
我有一个最小的完整可验证示例，但它不适用于 JSFiddle、OneCompiler 或我尝试过的其他几个示例。我认为这是因为他们以不受 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>
我试过什么
我尝试使用一种样式来强制数学字体保持不变（相对）：
!importantmjx-math { font-size: 1.2em !important; font-size: 120% !important; font-size: 23px !important; }显然不是同时进行的——一个接一个地尝试。我可以在 Chrome 的开发者工具中看到应用了最终样式，但行为是相同的。
根据这个 Google Groups 线程的建议，我尝试在禁用的情况下配置 MathJax：
matchFontHeightchtml: { scale: 1.2, matchFontHeight: false, }, svg: { scale: 1.2, matchFontHeight: false, }我试过设置这个标签：
<meta><meta name="viewport" content="initial-scale=0.9, maximum-scale=0.9">
我尝试了其他几件事，但没有跟踪它们/忘记了。
GitHub 上有一个很长的讨论，可能相关，但我无法从中提取解决方案。
答：
1赞
Davide Cervone
10/30/2023
#1
我在评论中建议尝试添加
<meta content="width=device-width, initial-scale=1" name="viewport"/>
，因为这些缩放问题通常与移动设备如何以可能混淆 MathJax 的方式缩放视口有关。<head>
我说“帮助”而不是“完全解决”，因为这样一来，整个页面在移动设备上的字体大小基本上翻了一番
也许试试
<meta content="width=device-width, initial-scale=.5" name="viewport"/>
看看这是否更好？
您可以在此处阅读有关此元标记的更多信息。您可以尝试其他一些选项，例如或代替 ，或设置为特定大小。我没有用过这些，所以不知道哪个最适合你的情况。minimum-witdthmaximum-widthinitial-widthwidth
评论
0赞
Andrew Cheong
10/31/2023
谢谢！把我的评论也移到这里。我在玩弄标签后的发现：（1）你的建议奏效了！但也有副作用。数学现在保持固定大小，周围的文本也是如此。但总的来说，它增加了一切的规模。不过，我注意到我的移动设备上的文本看起来几乎与我的桌面显示器上的文本大小完全相同——这可能是巧合，也可能正是它所要实现的目标。（2）根据您的第二个建议，通过反复试验，我发现使所有文本都变成了它们没有的大小<meta>initial-scale=1initial-scale=0.76
0赞
Andrew Cheong
10/31/2023
标记。我敢打赌，这因设备而异。但是，仍然有可能缩小，数学将再次变得微不足道。（3）所以，最后我选择了.这是我希望文本在移动设备上的大小（希望在其他移动设备上足够接近），并且它不允许缩放，有效地处理了缩小的数学。我想这对可访问性来说不是很好，但我希望我选择的字体大小对大多数人来说足够可读。<meta><meta name="viewport" content="width=device-width,minimum-scale=0.76,initial-scale=0.76,maximum-scale=0.76">
0赞
Andrew Cheong
10/31/2023
顺便说一句，我发现 Medium 对他们的文章做了同样的事情：.<meta data-rh="true" name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,maximum-scale=1">
评论
<iframe><meta content="width=device-width, initial-scale=1" name="viewport"/><head>