@media queries not working on my iPad


#1

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:


#2

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.


#3
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.


#4

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.


#5

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


#6

Brilliant - I was just missing a piece of meta.


#7

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


#8

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?


#9

@LandonWilson

it’s a simple trick