How to make long equation inside fraction optimized for mobile view?

Question

I'm actually using mathjax when coding, but it's quite similar to latex.

When calculating standard deviation, I am using this line of code:

$$\sqrt{\frac{( (2-6.125)^2 + (4-6.125)^2 + (4-6.125)^2 + (5-6.125)^2 + (6-6.125)^2 + (9-6.125)^2 + (9-6.125)^2 + (10-6.125)^2}{10}}=2.9$$

It looks good in our regular app (wraps the numerator text) which is fine, but messes up in the mobile app and either goes off the screen or wraps and makes the screen flash.

How can I make it look like this:

Answer 1

You could use a \parbox for the numerator.

\documentclass{article}
\textwidth 2in
\begin{document}
\[\sqrt{\frac{\parbox{.8\textwidth}{$( (2-6.125)^2 + (4-6.125)^2 + 
  (4-6.125)^2 + (5-6.125)^2 + (6-6.125)^2 + (9-6.125)^2 + 
  (9-6.125)^2 + (10-6.125)^2 )$}}{10}}=2.9
\]
\end{document}

Changing the \textwidth will adjust the width of the \parbox:

\documentclass{article}
\textwidth 6in
\begin{document}
\[\sqrt{\frac{\parbox{.8\textwidth}{$( (2-6.125)^2 + (4-6.125)^2 + 
  (4-6.125)^2 + (5-6.125)^2 + (6-6.125)^2 + (9-6.125)^2 + 
  (9-6.125)^2 + (10-6.125)^2 )$}}{10}}=2.9
\]
\end{document}

Answer 2

The following solution employs \splitfrac directives, provided by the mathtools package, to split the numerator across either 2 or 4 lines.

\documentclass{article}
\usepackage{mathtools} % for \splitfrac macro
\begin{document}
\begin{gather*}
\sqrt{\frac{\splitfrac{(2-6.125)^2 + (4-6.125)^2
                     + (4-6.125)^2 + (5-6.125)^2}{
                     + (6-6.125)^2 + (9-6.125)^2
                     + (9-6.125)^2 + (10-6.125)^2}}{8}} \approx2.9\\[2\jot]
\sqrt{\frac{\splitfrac{(2-6.125)^2 + (4-6.125)^2}{
            \splitfrac{{}+ (4-6.125)^2 + (5-6.125)^2}{
            \splitfrac{{}+ (6-6.125)^2 + (9-6.125)^2}{
                         + (9-6.125)^2 + (10-6.125)^2}}}}{8}} \approx2.9 
\end{gather*}
\end{document}