Resize Mathjax On Mobile

Question

My Mathjax code looks fine on the computer but oversized on mobile: http://teach.sg/mathematics/additional-mathematics/trigonometric-functions/

Any way to resize this automatically for mobile?

Note: I am using safari on iPhone 6. Chrome gives me the same result.

Answer 1

I hope this simple solution will fit to you:

Just add overflow-x: scroll; to div's style that containing MathJax equation. It will make your MathJax equation scroll-able, and prevent going equation out of range.

In your example it is a div with 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;".

Add overflow-x: scroll; at the end of style tag :
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;".
It will add a scroll at the bottom of the div. MathJax equation will stay in the "Special Angles" box.
Raw preview :

Actually there can be many solutions(including smart ones using jQuery), you can find appropriate one by googling "responsive tables in html". MathJax is using <span>, it's not actually the tables, but I hope that will help.

Answer 2

In this answer I found a better solution to this problem:

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