Странное поведение media.css. Поведение на смартфоне и viewport resizer'е не совпадает?

Question

[Иван Федоров]

Суть вопроса такова: заказали простенький сайт, но он должен быть адаптивным. Все сделал, но возникла одна непонятка: в media.css прописал нужное поведение для экрана шириной 480px. При проверке адаптивности в разных viewport resize'рах все выглядит нормальным, а вот на реальном смартфоне содержимое видно не целиком, часть находится за правой границей экрана, точнее должно находиться, при скролле экрана вправо, там нет ни фона, ни текста, просто белое поле(сайт имеет темный фон и белый текст). Сайт приобретает нормальный вид только если прописать правила для экрана 320px, хотя везде в характеристиках написано что экран этого смарта имеет разрешение 480х800. Если конкретно модель, называется Alcatel OneTouch Pixi(3) 4 4013D. В положении Landscape проблем с отображением нет. Что я не так делаю?
Заранее спасибо.

Comments

[devstudent]

а как насчет проверить на других смартфонах

[Иван Федоров]

devstudent: Других с таким экраном нет под рукой. Есть 540х960 пикс. там все ок.

[Сергей delphinpro]

На телефоне андроид? Подключите удаленный отладчик. И смотрите верстку в инспекторе хрома.

[Иван Федоров]

Сергей: Это через Android Studio делается? Раньше не сталкивался.

Answer 1

[Алексей]

Почитайте на хабре про верстку под Ретина дисплее: https://habrahabr.ru/post/150071/

На них количество виртуальных точек (как раз используемых media query) меньше реального.

Comments

[Иван Федоров]

Спасибо, почитаю. Но у меня точно не ретина:)

[Алексей]

Иван Федоров: Ретина не подразумевает продукцию Apple, в данном случае это повышенное количество точек на дюйм, относительно стандартного.

[Иван Федоров]

Алексей: Я идею ввиду что данный девайс бюджетного класса, никакой ретиной тут и не пахнет.

Answer 2

[Ксения Михайлова]

Контент в .header выходит за его границы и растягивает этот блок.

.header {
    overflow: hidden;
}

Comments

[Иван Федоров]

Как-то не подумал. Спасибо, вернусь - попробую.