CODEWITHSUNDEEP
ioscsswordpressipadmedia-queries
Gonpires
Gonpires

Reputation: 91

iPad Retina Display specific media queries

I've been using Apple's Xcode tool (iOS Simulator) to code iPad views. I can't target landscape view on the iPad Retina device. I've been trying the following media queries...

@media only screen and (min-device-width : 768px) and (max-device-width 
: 1024px) and   (orientation : landscape) and ( -webkit-min-device-
pixel-ratio: 2){  //style goes here// }

@media only screen and (min-device-width : 1536px) and (max-device-width 
: 2048px) and   (orientation : landscape) and ( -webkit-min-device-
pixel-ratio: 2){  //style goes here// }

I can't find any other way to target the landscape view in iPad Retina. I have even tried this code in different parts of the CSS file, still no luck at all.

Upvotes: 0

Views: 1824

Answers (2)

Gonpires
Gonpires

Reputation: 91

I've just realized my FTP program was not working correctly when I entered the editor inside the Wordpress dashboard (the query was not there) so I manually wrote it dawn directly on my theme's CSS file and it worked.This FTP program stole hours from me.. but the query was right and the meta tag as well.

All in all, for anyone experiencing issues while coding new iPads Retina displays (32 and 64 bits), they should include the meta viewport in their headers:

 <meta name="viewport" content="width=device-width, user-scalable=no">

and the corresponding query (Landscape view, in this case)is:

@media only screen and (min-device-width : 768px) and (max-device-width 
: 1024px) and   (orientation : landscape) and ( -webkit-min-device-
pixel-ratio: 2){  //style goes here// }

Upvotes: 1

Usse
Usse

Reputation: 66

The first one is correct, i use the same media query and is working on a real device. Maybe you forgot to include the meta viewport?

Upvotes: 2

Related Questions