Что не так с media-queries?

Question

[Ivan Stroykin]

Доброго времени суток.
Сделал адаптивность дизайна под 3 размера.
в media-queries указал

/*Под маленькие мониторы и планшеты*/
@media only screen and (max-width:1013px) {...}

/*Под маленькие планшеты и телефоны*/
@media only screen and (max-width:789px) {...}

Но почему-то когда захожу с телефона (проверил на LG G3s и Iphone 4s). Применяется только
@media only screen and (max-width:1013px)
В чем может быть проблема?
Ссылка на пример

Answer 1

[holfza]

Добавьте в head

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

Comments

[Ivan Stroykin]

Спасибо. Странно, а раньше и без этого работало)

[Сергей delphinpro]

Иван Стройкин: никогда без этого не работало

[Ivan Stroykin]

Сергей: у каждого своя правда. Видимо не замечал.

[Сергей delphinpro]

Иван Стройкин: причем здесь какая-то правда? Это технический аспект. Если вы смотрите верстку в браузере на ПК уменьшая окно, то ему не нужен мета-тег. Если смотрите с устройства - то без мета тега страница просто будет масштабироваться.
frontender.com.ua/mobile-web/wtf-viewport

[Ivan Stroykin]

Сергей: Вы не правильно поняли. Я не замечал ранее, и для меня правда была в том, что "раньше работало без этого". Думал так. Хотя правда в обратном. Потому и написал, что не замечал. И спасибо за ссылку :)

Answer 2

[Котик Антон]

Добавьте:

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

Comments

[Ivan Stroykin]

Спасибо)