title: inconsistent scaling of elements in php with css on mobile device
body: <p>I have a php script that uses MathJax to format some equations. When viewed on a computer it is all fine and well but when viewed on a mobile telephone two problems appear. First here's my code that:</p>
  <pre><code>&lt;?php
  
  echo '&lt;head&gt;';
  
  $browser = get_browser(null, true);
  if($browser['ismobiledevice']) {
  echo '
  &lt;style&gt;
      @media only screen 
      and (max-width : 320px) {
      /* Styles */
      }
      body {font-size: 2em !important;}
      .MathJax {font-size: 2em !important;}
  &lt;/style&gt;
  ';}
  
  echo'&lt;script type=&quot;text/javascript&quot; id=&quot;MathJax-script&quot; async
    src=&quot;https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js&quot;&gt;
  &lt;/script&gt;';
  
  echo '&lt;/head&gt;';
  
  
  /////////////////////////////
  echo '&lt;a href=&quot;www.link.com&quot;&gt;Link&lt;/a&gt;&lt;br&gt;&lt;br&gt;';
  
  echo 'Consider the following equation&lt;br&gt;&lt;br&gt;
  &lt;table&gt;&lt;tr&gt;&lt;td&gt;\(6x+8\)&lt;/td&gt;&lt;td&gt;\(=\)&lt;/td&gt;&lt;td&gt;\(11\)&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;br&gt;&lt;br&gt;'
  ;
  
  echo $solutionText = 'This is the solution \(x=\frac{1}{2}\)';
  
  ?&gt;
  </code></pre>
  <p>The code above has used bits and bobs that I found here on this site.</p>
  <p>The two questions are:</p>
  <ol>
  <li>The equation when within a &lt;table&gt; element doesn't seem to get scaled. What needs to be modified in the css so that such equations font-size are appropriately adjusted.</li>
  <li>When there is enough text to get to the edge of the screen (or past some kind of threshold) the text automatically enlarges. Below are two screenshots from my mobile phone to show this. The code above gives the left hand part of the picture below.</li>
  </ol>
  <p><a href="https://i.stack.imgur.com/7JFHm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7JFHm.jpg" alt="side by side comparison" /></a></p>