title: Upon scaling, fix the size for specific element
body: <p>When I view my site on my phone, I can prevent it from resizing/scaling with</p>
  
  <pre><code>&lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /&gt;
  </code></pre>
  
  <p>However, I want to be able to resize, but is it possibly to keep some of the elements fixed scale?</p>
  
  <p>Basically, if I have</p>
  
  <pre><code>&lt;header&gt;stuff&lt;/header&gt;
  &lt;div id="content"&gt;
      Content
  &lt;/div&gt;
  </code></pre>
  
  <p>When I zoom in on my phone, "content" would zoom in as normally, but the header would remain fixed size. The font for header would be the same size, look the same, etc.</p>
  
  <p>There is too much text for me to consider using images as an alternative option.</p>
  
  <p>Basically, I'd like to have a <code>user-scalable=no</code> kinda thing for specific elements.</p>
  
  <p>JS/jQuery approaches are all ok, and yes, I know that one of the solutions is to go about resizing everything manually, or making everything a percentage, but that's ugly and not what I'm looking for.</p>