在移动设备上调整 Mathjax 的大小答案

【问题标题】：Resize Mathjax On Mobile在移动设备上调整 Mathjax 的大小
【发布时间】：2015-04-19 09:32:42
【问题描述】：

我的 Mathjax 代码在计算机上看起来不错，但在移动设备上却过大：http://teach.sg/mathematics/additional-mathematics/trigonometric-functions/

有什么方法可以为移动设备自动调整大小？

注意：我在 iPhone 6 上使用 safari。Chrome 给了我相同的结果。

【问题讨论】：

如果您正在寻找 MathJax 中的内置方式，那么答案是否定的； overflow: scale 尚未实现。
@PeterKrautzberger 我明白了，那么调整大小的最佳方法是什么，无论是通过 html 还是其他方式？
在我几年前的一次演讲中，here 有一个例子。下一页显示了示例的源代码。

标签： styling mathjax

【解决方案1】：

我希望这个简单的解决方案适合你：

只需将overflow-x: scroll; 添加到包含MathJax 方程的div 样式中。它将使您的 MathJax 方程可滚动，并防止方程超出范围。

在您的示例中，它是一个 div id="std-body-box-2864" style="color:#000000; border-top-color: #56b5ff; border-left-color: #56b5ff; border-right-color: #56b5ff; border-bottom-color: #56b5ff; background-color: #ffffff;"。

在样式标签末尾添加overflow-x: scroll;：
style="color:#000000; border-top-color: #56b5ff; border-left-color: #56b5ff; border-right-color: #56b5ff; border-bottom-color: #56b5ff; background-color: #ffffff; overflow-x: scroll;".
它将在 div 的底部添加一个滚动条。 MathJax 方程将保留在“特殊角度”框中。
原始预览：

实际上可以有很多解决方案（包括使用 jQuery 的智能解决方案），您可以通过谷歌搜索“html 中的响应式表格”找到合适的解决方案。 MathJax 正在使用<span>，它实际上不是表格，但我希望这会有所帮助。

【讨论】：

考虑到 MathJax 修改其输出的方式（例如，用户偏好等），这将不是很稳定。将方程式包装在容器中并设置 overflow 应该可以工作。
@PeterKrautzberger “将方程式包装在容器中并设置overflow”是什么意思？我对HTML不太熟悉，只有一些基础知识

【解决方案2】：

在this answer我找到了更好的解决这个问题的方法：

.MathJax_Display, .MJXc-display, .MathJax_SVG_Display {
    overflow-x: auto;
    overflow-y: hidden;
}

【讨论】：