Media запросы для телефона не срабатывают?

Question

[MdaUZH]

есть медиа запрос:

@media screen and (max-width: 768px) {
...
}
@media screen and (max-width: 1000px){
}

Но когда открываю с телефона ( iphone 4s ), где экран 640×960 на сколько мне известно...

Медиазапрос не срабатывает, точнее срабатывает, но не тот что 768, а тот что max-width 1000px

Почему так?
мб я как-то не правильно строю медиазапросы?

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Указан.

Вот пример:
Полная версия: cssdeck.com/labs/full/gs1xp8rr
Версия с кодом: cssdeck.com/labs/gs1xp8rr

Помогите пожалуйста, в чем проблема?

Answer 1

[gassmonkey]

Поменяй их местами, и будет тебе счастье.

Answer 2

[sergey]

для iphone необходимо указывать вот таким образом:

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

вот возьми на заметку css-tricks

Comments

[MdaUZH]

width=device-width
разве это не делает meta viewport ?

зачем указывать минимальное ?

[sergey]

MdaUZH: я привел пример как правильно писать для iphone, это общепринятая практика: min-device-width или max-device-width, а не так как ты написал.

Answer 3

[Stopy]

Гугли meta viewport

Comments

[MdaUZH]

у меня указан он