Issue
I am currently using MathJax to display mathematical equations on my webpage:
https://i.sstatic.net/EfvVq.png
The problem I am facing is that I want the math font to appear larger than the surrounding text, as depicted in the image above. However, when viewed on mobile devices, the math font size scales with the screen resolution and becomes extremely small and unreadable. I have tried using Chrome's developer tools to simulate a mobile view, and the issue persists on my Android phone as well:
https://i.sstatic.net/scrVP.png
Minimum Verifiable Example (MVE)
I have created a minimal complete verifiable example, but it does not work properly on platforms like JSFiddle or OneCompiler. This could be due to these platforms rendering the output within an iframe which is not affected by the responsive design settings of Chrome's developer tools. The issue also persists on actual mobile devices. To view a temporary reproduction of the problem, you can visit the following link: here, or copy and paste the code into a new .html file:
<html lang="en">
<head>
... (code truncated for brevity)
</head>
<body>
... (code truncated for brevity)
</body>
</html>
Attempts Made So Far
I have attempted to use the
!importantstyle rule to make sure that the font size of the math elements remains consistent:mjx-math { font-size: 1.2em !important; }Despite applying this style through Chrome's developer tools, the issue persisits.
Referring to suggestions from a Google Groups thread (link provided), I disabled the
matchFontHeightoption for configuring MathJax:chtml: { scale: 1.2, matchFontHeight: false, }, svg: { scale: 1.2, matchFontHeight: false, }I also experimented with setting a specific viewport meta tag:
<meta name="viewport" content="initial-scale=0.9, maximum-scale=0.9">
Although I have tried other solutions as well, many of them were unsuccessful or I may have overlooked some steps. Additionally, there is a lengthy discussion on GitHub regarding a similar issue, but I was unable to extract a viable solution from it.