title: iPad only media queries for safari in landscape
body: <p>When using <code>CSS</code>, I can properly align my elements using css with <code>Chrome</code>. In <em>chrome inspector-> ipad view</em>, all looks as they should be. But when I test it on actual iPad, some <code>CSS</code> are not applied. I've found ipad specific <code>CSS</code> media queries as follows,</p>
  
  <pre><code>** /* Safari 7.1+ */ **
  _::-webkit-full-page-media, _:future, :root .my-class {
      padding-right: 0;
  }
  
  
  **/* Safari 10.1+ */**
  @media not all and (min-resolution:.001dpcm) { @media
    {
     .my-class {
      padding-bottom: 0;
    }
    }}
  
  
    **/* Safari 6.1-10.0*/**
  @media screen and (min-color-index:0) 
  and(-webkit-min-device-pixel-ratio:0) { @media
  {
      .my_class {
      padding-bottom: 0;
    } 
  }}
  </code></pre>
  
  <p>Problem is, while they're working fine with portrait mode, There is no specified way for me to apply <code>CSS</code> into landscape mode. How can I use media queries for landscape mode in real iPad device/safari on iOS? Without affecting any other browser?</p>
  
  <h2><strong>Update</strong></h2>
  
  <p><strong>I'm not looking for standard media queries like,</strong> </p>
  
  <pre><code>@media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px) 
  and (orientation : portrait) { /* STYLES */ }
  </code></pre>
  
  <p>Landscape Mode</p>
  
  <pre><code>@media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px) 
  and (orientation : landscape) { /* STYLES */}
  </code></pre>