Changing MathJax's font size on Anki

Question

I've been using Anki with MathJax for some months now but the font size is incredibly small on desktop (it is fine on AnkiDroid, though). I got around it by using \huge every time I use MathJax, but that obviously isn't the best solution. It also makes everything too big on mobile.

My MathJax is configured as in this post. I've searched how to edit MathJax's scaling and font size but nothing worked (e.g.), it mostly ended just breaking it.

MathJax.Hub.processSectionDelay = 0;
MathJax.Hub.Config({
extensions: ["tex2jax.js"],    
    showProcessingMessages:false,
    tex2jax:{
        inlineMath: [['$','$']],
        displayMath:[['$$','$$']],
        processEscapes:true
    }
});

Also, my card's settings:

.card {
font-family: arial;
font-size: 20px;
text-align: center;
color: black;
background-color: white;
}

.cloze {
font-weight: bold;
color: blue;
}

Default size (too small) and \huge (more reasonable):

I know this should be easy. Maybe greatly reducing MathJax's scaling, if that's possible.

EDIT: Alistair Martin basically solved it (both desktop and AnkiDroid are fine). It's working this way:

<script type="text/x-mathjax-config">
MathJax.Hub.processSectionDelay = 0;
MathJax.Hub.Config({
  messageStyle: 'none',
  showProcessingMessages: false,
  tex2jax: {
    inlineMath: [['$', '$']],
    displayMath: [['$$', '$$']],
    processEscapes: true
  },
  SVG: {
    scale: (!!navigator.userAgent.match(/(mac)|(mobile)/i) ? 100 : 180)
  }
});
</script>

<script type="text/javascript">
(function() {
  if (window.MathJax != null) {
    var card = document.querySelector('.card');
    MathJax.Hub.Queue(['Typeset', MathJax.Hub, card]);
    return;
  }
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_SVG';
  document.body.appendChild(script);
})();
    </script>

Answer 1

Here's what has worked for me so far:

1. Change to SVG. This means changing the url parameter to ?config=TeX-MML-AM_SVG, as mentioned in the article you linked.
2. Change the JS script at the beginning of your card/s to include a SVG scale, whose value is based on the device

Something like this:

<script type="text/x-mathjax-config">
MathJax.Hub.processSectionDelay = 0;
MathJax.Hub.Config({
  messageStyle: 'none',
  showProcessingMessages: false,
  tex2jax: {
    inlineMath: [['$', '$']],
    displayMath: [['$$', '$$']],
    processEscapes: true
  },
  SVG: {
    scale: (!!navigator.userAgent.match(/(mac)|(mobile)/i) ? 100 : 180)
  }
});
</script>

^ here 100 is the % scale for Ankidroid & macOS, and 180 is the % scale for Windows.