title: Css media query, target web browser less than 1024px wide and iPad in Portrait
body: <p>I'm working on a responsive site and I want to make the site react to the browser being made less than 1024px wide, and use those same styles for the iPad in Portrait.</p>
  
  <p>However, if I apply a media query for styles when the browser is less than 1024 px like this</p>
  
  <pre><code>@media only screen and (max-width : 1024px) { /* styles */ }
  </code></pre>
  
  <p>They affect the iPad in Landscape which I don't want - how can I exclude the landscape iPad but include the Portrait iPad ?</p>