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

Question

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

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

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

Answer 1

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

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

在你的例子中它是一个带有 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> ，实际上不是表格，但我希望这会有所帮助。