Utilizing MathJax to display mathematical symbols on a mobile device- such as an iPhone, I encountered an issue with the meta tag:
<meta name="viewport" content="user-scalable=no, width=device-width" />
This seemed to be causing problems as the MathJax did not load web fonts and resorted to image fonts instead. However, setting a width in pixels above a certain threshold fixed this issue.
For example:
<meta name="viewport" content="user-scalable=no, width=360px" />
This resolved the problem of loading web fonts. Is there a more elegant solution to this dilemma? Although I prefer not to use absolute widths, having a page render with web fonts is a higher priority for me.
Below is an example of a page that experiences these issues:
<html>
<head>
<meta name="viewport" content="user-scalable=no, width=device-width" />
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript"
src="https://d3eoax9i5htok0.cloudfront.net/mathjax/latest/MathJax.js?config=TeX- AMS-MML_HTMLorMML">
</script>
</head>
<body>
<span style="color:green">
$$\sum_{n=0}^\infty x^n$$
</span>
</body>
</html>