title: CSS media query to target iPad and iPad only?
body: <p>Hi I am working with multiple tablet devices, iPad, Galaxy Tab, Acer Iconia, LG 3D Pad and so on.</p>
  
  <ul>
  <li>iPad - 1024 x 768</li>
  <li>LG Pad - 1280 x 768</li>
  <li>Galaxy Tab - 1280 x 800</li>
  </ul>
  
  <p>I want to target iPad only using CSS3 media query. Since, device width of LG and iPad is same 768px - I am having trouble separating each device.</p>
  
  <p>I have tried following to separate, but does not seem to be working:</p>
  
  <pre><code>@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) /* applied to lg also */
  @media only screen and (min-resolution: 132dpi) and (max-device-width: 1024px) and (orientation : portrait) /* applies to lg also */
  @media only screen and (device-aspect-ratio: 1024/768) and (orientation : portrait) /* does not work on iPad or LG */
  </code></pre>
  
  <p>I don't know the -webkit-device-pixel-ratio and other -webkit* options and their values to target for iPad. I don't want to use JavaScript for styles, any ideas?</p>