@media queries not working on my iPad

I have the following media query setup:

@media only screen and (max-width: 959px)

and it works when I size down my browser, but it doesn’t work when my iPad is in portrait. If I add “and (max-device-width: 959px)” it works on my iPad, but not in my browser. I need it to work in both.

What’s going wrong here? Thanks! :slight_smile:

768 is the width for portrait on iPad 1/2. But portrait for some other tablets is 800 so I would go with that number.

CodingJack said

768 is the width for portrait on iPad 1/2

I know this - and that falls under max-width: 959px. It’s 959 or less, so it SHOULD be applied, and is on my browser ,just not on my iPad.

my bad I read it wrong. Maybe clear your iPad’s cache? iPad sometimes seems to want to cache everything and I’ve fallen into this trap a few times.

Didn’t work either. I think I need to make it disable some of webkit’s functionality to make it work.

Brilliant - I was just missing a piece of meta.

if you want to target iPad/iPhone Specifically use max/min-device-width rather than max/min-width… desktop browsers completely ignore it. i.e

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 1024px) {
@media only screen and (max-device-width: 480px) {
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 480px) {

you can also add"and (orientation:portrait)" or “and (orientation:landscape)” to the ends

Thanks, but I’ve got all the queries from Skeleton.

You know the mobile menu you see in themes by Kriesi, and many others that are select elements? Is that a plugin or something?


it’s a simple trick