CSS media query to target iPad and iPad only

0 votes

Hello, I work with a variety of tablet computers, including the iPad, Galaxy Tab, Acer Iconia, LG 3D Pad, and others.

  1. iPad - 1024 x 768
  2. 1280 x 768 LG Pad
  3. 1280 x 800 on the Galaxy Tab

I just want to use CSS3 media queries to target the iPad. Since the LG and iPad have the same device width (768 pixels), I am having problems separating each one.

To separate, I tried the following, but it does not appear to be working:

@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 */

I am unaware of the values for the -webkit-device-pixel-ratio and other -webkit* parameters to aim for the iPad. Any suggestions because I don't want to utilize JavaScript for styles?

Jul 29, 2022 in CSS by Edureka
• 13,620 points

edited 5 days ago 7 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP