title: Dynamically changing the meta viewport attribute in Mobile Safari
body: <p>I am working on an adaptive website where we're serving different stylesheets to mobile and tablet via media queries.</p>
  
  <p>The goal is to serve a good experience to Iphone and iPad and to try and eliminate the Mobile Safari orientation bug as much as possible. I've looked at all sorts of possible solutions but they either didn't seem to work properly or they weren't suitable for the project until I thought I had found an answer from <a href="http://www.quirksmode.org/blog/archives/2011/06/dynamically_cha.html" rel="nofollow">PPK's site</a> where he implies its possible to dynamically change the viewport with Javascript immediately after the declaration.</p>
  
  <p>I've tried the following code to no avail:</p>
  
  <pre><code>&lt;meta name="viewport" id="testViewport" content="user-scalable=yes" /&gt;
  &lt;script&gt;
  var mvp = document.getElementById('testViewport');
  if (screen.width &lt; 740) {
      alert("mobile screen");
      mvp.setAttribute('content','320');
  }
  var value = mvp.getAttribute("content");
  alert(value);
  &lt;/script&gt;
  </code></pre>
  
  <p>My alerts are being called where I would expect them to be, (so on an iPhone, the final alert says 'value' is == 320) yet the viewport is displaying it would naturally.</p>
  
  <p>Note, I've put 'user-scalable=yes' in the content attribute intitially to save it from being empty, amongst me trying to figure out what's wrong.</p>
  
  <p>Any clues or tips would be much appreciated!</p>