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

Question

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

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

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

Answer 1

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

只需将 overflow-x: scroll; 添加到 div 包含 MathJax 方程的样式。它将使您的 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 方程将保留在 "Special Angles" 框中。
原始预览：

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

Answer 2

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

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

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

Resize Mathjax On Mobile

styling

mathjax