title: Viewport for IE10 & 11 desktop, but not mobile
body: <p>I build a lot of responsive sites. I'd like to support IE10 and IE11's snap modes, but I can't do it fully without breaking support for Windows Phone 8. This is the code I'm currently using, in my CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>@media screen and (max-width:400px) {
      @-ms-viewport{
          width: device-width;
      }
  }
  </code></pre>
  
  <p>It works alright, but if IE10/11 isn't snapped to the smallest position possible, the site displays as zoomed out. If I get rid of the media query, it displays correctly in IE10/11 on desktops and tablets, but it displays as the desktop site in IE10 mobile on Windows Phone 8. Is there a way around this, or am I stuck only half supporting IE10/11's snap modes?</p>
  
  <p>Screenshots:</p>
  
  <p>With Media Query, Windows 8:</p>
  
  <p><img src="https://i.imgur.com/lo47jKp.jpg" width="300" /></p>
  
  <p>With Media Query Windows Phone 8:</p>
  
  <p><img src="https://i.imgur.com/piiakAF.png" width="300" /></p>
  
  <p>Without Media Query, Windows 8:</p>
  
  <p><img src="https://i.imgur.com/o57b3qd.jpg" width="300" /></p>
  
  <p>Without Media Query, Windows Phone 8:</p>
  
  <p><img src="https://i.imgur.com/WGMto2r.png" width="300" /></p>