title: Dynamically change viewport with jquery based on width
body: <p>I have 2 viewports that I want to use.  The site is built responsive across a range of breakpoints, but on some pages we really just want to display the full desktop view UNLESS it's a phone, then we want the responsive to kick in.</p>
  
  <p>So, on desktops, tablets and everything in between, we want this viewport that doesn't really respond.  It just scales the desktop page to fit the screen.  When I manually set it to this, everything works great on desktop/tablets.</p>
  
  <pre><code>&lt;meta name="viewport" content="maximum-scale=1.0" /&gt;
  </code></pre>
  
  <p>On mobile (let's say under 768 pixels), we want the viewport below.  When I manually set it to this, everthing works great on mobile.</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /&gt;
  </code></pre>
  
  <p>The trick then, is how do I nake these viewports dynamically change based on width?</p>
  
  <p>I've tried to get something going that looks like this, but it's not working.  I suspect due to some flaws in my javascript.  When testing on a phone I'm still getting the 'desktop' view.</p>
  
  <pre><code>// first set the viewport to the desktop settings
  &lt;meta id="myViewport" name="viewport" content="maximum-scale=1.0" /&gt;
  
  // then some javascript to dynamically change
  &lt;script&gt;
  if (window.innerWidth &lt; 768) {
      var mvp = document.getElementById('myViewport');
      mvp.setAttribute('content','width=device-width');
      mvp.setAttribute('content','initial-scale=1.0');
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>What am I missing here?</p>
  
  <p>As always, thanks in advance....</p>