Jump to content

media queries and iDevices+droid + orientation


The14thGOD

Recommended Posts

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

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.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.