CODEWITHSUNDEEP
cssmedia-queries
Jimmy Burgess
Jimmy Burgess

Reputation: 121

CSS media query for all phones but not iPad

Hi I'm trying to write a media query that will affect all phones but not iPads.

I'm having a hard time doing so because apparently android devices change their device-width as they change orientation. Portrait to Landscape means the width becomes the height and vice versa. Apple devices report their device width as the same value regardless of orientation. The fact that there are android phones with higher resolution than iPads further complicates the issue.

If there is an android phone with a device height of 1280px and iPads have a device height of 1024px, how can I write a media query that will affect all Android phones but not iPads?

Upvotes: 1

Views: 304

Answers (1)

Robot Woods
Robot Woods

Reputation: 5687

You could use this to differentiate an Android device in landscape from an iPad in landscape, but I'm not sure on portrait:

<style>
@media all and (min-device-aspect-ratio:1/1) and (orientation:landscape) {
    /*because an iPad doesn't change it's width, it's device aspect ratio will not be greater than 1/1  */
    body {background-color:#00FF00;}
}
</style>

Upvotes: 1

Related Questions