title: How does -ms-view-state differ from standard CSS Media Queries Expressions?
body: <p>This is part question, and part hope for confirmation. I have my suspicions about the answer to this, and will add my two-cents, but I'd like independent confirmation since the Win8 Forums don't have this particular feature documented very well that I could find.</p>
  
  <p>In Windows 8, when building Metro Style Applications using HTML/JS/CSS, the templates all include a series of CSS Media Queries in default.css. They are:</p>
  
  <p><code>@media screen and (-ms-view-state: fullscreen-landscape) {}</code><br>
  <code>@media screen and (-ms-view-state: filled) {}</code><br>
  <code>@media screen and (-ms-view-state: snapped) {}</code><br>
  <code>@media screen and (-ms-view-state: fullscreen-portrait) {}</code></p>
  
  <p>I'm quite familiar with Media Queries, so my questions are: <strong>Why the need for vendor-prefixed expressions in Windows 8, and how do the <code>-ms-view-state</code> expressions differ from the W3C standard expressions like width, height and orientation?</strong></p>
  
  <p>Here's my take, please add yours below, and confirm, deny or correct me: I suspect that these rules <em>are</em> similar to the standard rules, but are a bit more adaptive, meaning that rather than defining sets of rules that match to a given width and height, these expressions encompass a state in a resolution-agnostic way. Because of this, I can use a single rule for my application in landscape mode <code>-ms-view-state: fullscreen-landscape</code> and it will work when the app is running at 1366x768, 1920x1080 or 2560x1440. Otherwise, I would have to define these rules three times:</p>
  
  <p><code>@media screen and (width: 1366px) and (height: 768px) {}</code><br>
  <code>@media screen and (width: 1920px) and (height: 1080px) {}</code><br>
  <code>@media screen and (width: 2560px) and (height: 1440px) {}</code></p>
  
  <p>Assuming my assertion is true, the only gap for me is why I couldn't then just define a single rule using 'min-' and orientation to achieve the same result:</p>
  
  <p><code>@media screen and (min-width: 1366px) and (min-height: 768px) and (orientation: landscape)</code></p>
  
  <p>Single rule, standard expressions. No need for a vendor-prefixed version. What am I missing?</p>