title: Orientation media query not working on iPad mini
body: <p>This small HTML code represents my HTML5 page very clearly.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
          &lt;title&gt;Pebble Go&lt;/title&gt;
          &lt;meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" /&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;style&gt;
              @media only screen and (orientation: portrait) {
                  html, body {
                      background: #222;
                  }
              }
              @media only screen and (orientation: landscape) {
                  html, body {
                      background: #000;
                  }
              }
          &lt;/style&gt;
      &lt;/body&gt;  
  &lt;/html&gt;
  </code></pre>
  
  <p>And so, on desktop browsers, Android tables and phones - it's working fine. But on iPad mini - it is not! … Result is - background is always gray. So my question is:</p>
  
  <p>Why is this media query not working on iPad mini … ??? … </p>
  
  <p>PS: I know that I have to use the max-device-width property as well, but I have a big reason not to do it! … </p>
  
  <p>The requirement for this page is to be 100% wide and high, and I decided to:</p>
  
  <ol>
  <li>Make the default CSS rules for landscape mode;</li>
  <li>Define rules for different widths in landscape mode;</li>
  <li>Define the portrait variants, relying basically on "orientation: portrait", and define different widths as well.</li>
  </ol>
  
  <p>I did this! It's working! … Except the iPad mini !!! … And if I use max-device-width or something like this - then I'll be in a situation where I'll have to write different rules for landscape - different widths, portrait mode - different widths, and then mobile devices - landscape and portrait … !!! …. </p>