title: Can you force a desktop browser to respect a viewport meta tag?
body: <p>I'm trying to do a "desktop view" (<em>/me shudders</em>) for a responsive site I'm working on.  The easiest way I've been able to accomplish this is by toggling the width in the viewport meta tag between <code>device-width</code> and a <code>1024px</code>, based on a cookie.</p>
  
  <p>This works great when I emulate or view in a mobile browser, but if I view the site on a desktop browser and just snap it with <code>Win + ←</code> or <code>Win + →</code>, the window is resized below a responsive breakpoint and does not respect the contents of the viewport meta tag.</p>
  
  <p>For reference, here is my viewport meta tag:</p>
  
  <p><code>&lt;meta name="viewport" content="width=1024; maximum-scale=1.0; user-scalable=yes"&gt;</code></p>
  
  <p>What I'm wondering, is if there's any way to force the viewport on desktop like you can on mobile devices and tablets.</p>
  
  <p>I've created <a href="http://codepen.io/collink/full/PqbRLW/" rel="nofollow">a pen that replicates the issue</a>.  If you resize the window you'll see that the <code>&lt;div&gt;</code> changes from orange to red at <code>1023px</code>.  If you then emulate a mobile device, say in Chrome, or view it from an actual mobile device, the <code>&lt;div&gt;</code> will stay orange, because the viewport is fixed at <code>1024px</code>, thus never hitting the media query.</p>
  
  <p>You can view the source of the pen here: <a href="http://codepen.io/collink/pen/PqbRLW" rel="nofollow">http://codepen.io/collink/pen/PqbRLW</a></p>