mobile-safari ignoring media query

Question

Here's my almost finished website.

The following media query is ignored by my iPad mini's browser. Why?

@media all and (max-width:800px){
#trigger {display:none;}
#telephone_leaf {display:none;}
#number_leaf {opacity:1;}
}

(style.css, line 974)

It works when resizing the desktop browser!

Actually, this is part of another problem. I can't seem to get the telephone-hover/click-leaf image to work on my iPad. For that reason, I'm trying to degrade into just showing the god-damn telephone number from the start at a certain browser width. But not even the @m works!! Going crazy.

Look here [Link][1] this should answer your question [1]: http://stackoverflow.com/questions/3375706/ipad-browser-width-height-standard — Oliver-H-Miller, Jul 25 '14 at 17:57

score 2 · Answer 1 · answered Jul 25 '14 at 18:02

2

I just found the answer! max-width is not supported by mobile devices. You have to put it as max-device-width! :)

answered Jul 25 '14 at 18:02

Neil S3ntence

198
2
19

Oliver-H-Miller · Answer 2 · 2014-07-25T17:33:12.490

0

Make sure to prefix all your code!
@media is still new to CSS3, so make sure it's all prefixed!

So with your code it needs to be like this:

@-webkit-media all and (max-width:800px){
#trigger {display:none;}
#telephone_leaf {display:none;}
#number_leaf {opacity:1;}
}

edited Jul 25 '14 at 17:33

answered Jul 25 '14 at 00:30

Oliver-H-Miller

451
1
7
19

ah I thought @media is universal! Or do you mean the CSS inside the media query? – Neil S3ntence Jul 25 '14 at 16:49
the only thing I'm using in that @media is opacity, but opacity only needs a IE filter workaround and the problem occurs on mobile Safari... – Neil S3ntence Jul 25 '14 at 17:28
@NilsSens What I mean is this: `@-webkit-media (blah) {}` – Oliver-H-Miller Jul 25 '14 at 17:29
@NilsSens Please put my answer as the correct one. Thanks! – Oliver-H-Miller Jul 25 '14 at 17:33
Checking if it solves the problem right now. Will do! – Neil S3ntence Jul 25 '14 at 17:37
Sorry it didn't solve the problem... still only the telephone image loads. #telephone_leaf {display:none;} is completely ignored. – Neil S3ntence Jul 25 '14 at 17:48
Put -> `` inside your head tags! Does it work? – Oliver-H-Miller Jul 25 '14 at 17:49
I tried it, also tried - nada – Neil S3ntence Jul 25 '14 at 17:51
I just found the answer! max-width is not supported by mobile devices. You have to put it as max-device-width! :) – Neil S3ntence Jul 25 '14 at 18:01

mobile-safari ignoring media query

2 Answers2