media queries and iDevices+droid + orientation

[The14thGOD]

First time I've done a mobile site that adapts to the screen size and I am having problems with media queries. I've gone to about 30 sites and none solve the issue.

 

Basically the set up I need is:

iPad orientation:landscape and desktop = style set 1

ipad orientation:portrait = style set 2

iphone+android = style set 3

 

Actual media quries:

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {/*styles*/}

@media only screen and (max-device-width: 480px){}

The issue with this is if you load the site in landscape on android it reverts to the desktop version of the site since the resolution is 800px wide. (I don't know why but iPhone does not break...it still loads the mobile site.

 

So then I get the brilliant idea to do:

@media only screen and (max-device-width: 480px), only screen and (max-device-width: 800px) and (orientation:landscape){

Works everywhere except if you view the site on the iPad on landscape, then it pulls in the mobile style set (3).

 

I have no idea what is going on...

Any help is always appreciated,

Thanks,

Justin

[The14thGOD]

This seems to work:

@media only screen and (max-device-width: 480px),only screen and (max-device-width: 800px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation:landscape){

However it won't target lower end android devices, and I'm not sure if android will go to a 2 pixel ratio.

This should catch a large amount of the users out there though.