title: Changing meta viewport depending on device/screen resolution in jQuery Mobile
body: <p>I would like to change my viewport from:</p>
  
  <pre><code>&lt;meta name="viewport" content="user-scalable=no"&gt;
  </code></pre>
  
  <p>To:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  </code></pre>
  
  <p>Based on device screen. The first example works perfect for the iPad, but on the iPhone I have a responsive style sheet that i want to kick in.</p>
  
  <p>I've tried this snippet which I've modified from this question. <a href="https://stackoverflow.com/questions/6216409/changing-viewport-based-on-device-resolution">changing viewport based on device resolution</a></p>
  
  <pre><code>// Check for iPhone screen size
  if($.mobile.media("screen and (min-width: 320px)")) {
      // Change viewport for smaller devices
      $('meta[name=viewport]').attr('content','width=device-width, initial-scale=1');
  }
  </code></pre>