Search code examples
javascripthtmlcssfontsmathjax

Can't get MathJax math font size to stay same size relative to surrounding text

Problem

I'm using MathJax to render math on my page:

enter image description here

I would like the math font to be larger than the text surrounding it, as shown above. But for some reason on mobile, the math font scales with the resolution and becomes unreadably small. I'm using Chrome's developer tools to emulate a mobile view, but I can confirm it's the same on my Android phone:

enter image description here

MCVE

I have a minimal complete verifiable example but it doesn't work on JSFiddle, OneCompiler, or a couple other ones I've tried. I think it's because they render the resulting page in an <iframe> that isn't affected by going mobile in Chrome's dev tools. It doesn't even go mobile on my phone, actually. I can provide a temporary reproduction on my own server here—or you'll have to copy/paste the code into a new .html file yourself:

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>MCVE</title>
    <script>
      MathJax = {
        tex: {
          inlineMath: [['$', '$']],
          displayMath: [['$$', '$$']],
        },
        chtml: {
          scale: 1.2,
        },
        svg: {
          scale: 1.2,
        }
      };
    </script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    <style>
      body {
        font-family: 'Arial', sans-serif;
        font-weight: 300;
        font-size: 23px;
        line-height: 1.75;
      }
    </style>
  </head>
  <body>
Our purpose is to study a certain feature of quantum mechanics as seen through a hypothetical device—this apparatus 𝒜. This device—modeled on a real device of course—has a strange behavior that gives rise to an interesting property we'd like to study. It's this: Once you prepare the device, i.e. put it in one of the situations $\ket{u}$, $\ket{d}$, $\ket{r}$, $\ket{l}$, $\ket{o}$, $\ket{i}$, if you then orient it on a different axis and take a reading, you'll get $+1$ half the time, and $-1$ the other half of the time—<em>despite setting up the same starting situation and re-orienting the device exactly the same way every time</em>. In other words, the measurement of the re-oriented situation appears to be non-deterministic. Let's create a new notation to depict this "re-oriented situation" so it's easier to talk about:
  </body>
</html>

What I've tried

  1. I've tried using an !important style to force math fonts to stay the same (relatively):

    mjx-math {
  font-size: 1.2em !important;
  font-size: 120% !important;
  font-size: 23px !important;
}

    Not at the same time obviously—tried them one by one. I can see in Chrome's developer tools that the final style is applied, yet the behavior is the same.

  2. Taking advice from this Google Groups thread, I tried configuring MathJax with matchFontHeight disabled:

    chtml: {
  scale: 1.2,
  matchFontHeight: false,
},
svg: {
  scale: 1.2,
  matchFontHeight: false,
}

  3. I've tried setting this <meta> tag:

    <meta name="viewport" content="initial-scale=0.9, maximum-scale=0.9">

I've tried several other things but didn't keep track of them / have forgotten.

There's a long discussion on GitHub that may potentially be related but I couldn't extract a solution from it.

Solution

  • I suggested in a comment to try adding

    <meta content="width=device-width, initial-scale=1" name="viewport"/>

    to the document<head>, as these scaling issues often are related to how mobile devices scale the viewport in ways that can confuse MathJax.

    I say "helped" not "fully resolved" because with this, the entire page's font size on mobile was basically doubled

    Maybe try

    <meta content="width=device-width, initial-scale=.5" name="viewport"/>

    and see if that is better?

    You can read more about this meta tag here. There are some other options that you might try, like minimum-witdth or maximum-width instead of initial-width, or setting width to a specific size. I haven't worked with these much, so don't know which might work best in your situation.