title: CSS media query for iPad Pro 12.9 3rd generation
body: <p>I'm trying to detect the above device and size web content accordingly.  </p>
  
  <p>The below query works for every iPad Pro device apart from 12.9 inch 3rd generation.  Does anyone know the correct parameters for width / height?</p>
  
  <pre><code>/* iPad pro */
  @media only screen
  and (min-device-width: 1024px)
  and (max-device-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2)
  {
  }
  </code></pre>
  
  <p>I have now tried the code below as suggested.  It still does not work on iPad Pro 12.9 3rd generation only. Screenshot of iPad simulator attached.  The login section should fill the width of the screen</p>
  
  <pre><code>/* Landscape*/
  @media only screen and (min-device-width: 1366px) and (max-device-height: 1024px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: landscape)
  {
      div.information
      {
          width:1290px;
          padding-left:20px;
          padding-right:20px;
          padding-top:5px;
          padding-bottom:5px;
          border-radius: 20px;
          margin-bottom:10px;
      }
  }
  
  /* Portrait*/
  @media only screen and (min-device-width: 1024px) and (max-device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait)
  {
      div.information
      {
          width:950px;
          padding-left:20px;
          padding-right:20px;
          padding-top:5px;
          padding-bottom:5px;
          border-radius: 20px;
          margin-bottom:10px;
      }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/gs5Si.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gs5Si.png" alt="enter image description here"></a></p>