Как правильно отобразить мобильную версию сайта?

Здравствуйте, у меня возникло несколько проблем с адаптивной версткой. Как их можно решить?
1) Отображение мобильной версии сайта начинается с ее увеличенной версии.
Медиа-запросы срабатывают, но при этом в начале отображается только часть сайта , а не весь, как задумано. Отображение нужно уменьшать, тогда все становится на свои места . (Хотелось бы сразу полчить отображение всего сайта целиком , а не его части.)
Использую:
media only screen and (min-device-width: 0px) and (max-device-width: 640px)

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

2)Иногда случается, что inline-block элементы отображаюся как block , чаще всего на планшете, после изменения горизонатльной/вертикальной ориентации. (Что может быть не так?)
3)Как можно вычислить с какого устройства человек зашел на сайт ? Дабы сделать 2 вида верстки, возможно это поможет.
  • Вопрос задан
  • 2357 просмотров
Решения вопроса 2
Лучше по viewport через width, чем через device-width, чтоб еще ретину захватить. device-width - это когда уже совсем конкретизировать устройство.
Можно, например, как в Bootstrap.
media screen and (max-width: 767px) { ... }
media screen and (min-width: 768px) and (max-width: 991px) { ... }
media screen and (min-width: 992px) and (max-width: 1199px) { ... }
media screen and (min-width: 1200px) { ... }
Ответ написан
Комментировать
Вот уже и ответили на 1 вопрос.

2) Возможно у вас инлайн-блоки не влезают в ширину и начинают переносится?
3) Для вычисления я советую 2 способа
- https://tech.yandex.ru/detector/
- matthewhudson.me/projects/device.js
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы