Как сделать, чтобы на мобильных устройствах рендерилась более мелкая верстка?

drkrol

Постоялец
Регистрация
6 Мар 2016
Сообщения
112
Реакции
11
Здравствуйте. Никому не секрет, что, несмотря на высокое разрешение экранов мобильных девайсов, в браузере мобильных устройств отображается верстка других размеров. Так, к примеру, у 7 айфона с его fullhd экраном отображается верстка на 375 пикселей.
Я сделал сайт и понял, что минимальная ширина моего сайта составляет 533 пикселя. Дальше верстать смысла нет, ибо весь смысл сайта рушится. Таким образом, у меня media only screen and (min-width : 533px) . Но если в браузере (в режиме инспектора) открыть мой сайт в режиме iphone 7, то сайт будет некорректно отображаться, так как у него размер меньше, чем 533.

Подскажите, как сделать, чтобы устройства, у которых при рендеринге (либо своё родное) разрешение меньше 533 отображали верстку на 533?
 
Последнее редактирование:

drkrol

Постоялец
Регистрация
6 Мар 2016
Сообщения
112
Реакции
11
Короче говоря, как обычно, нашел решение, не дожидаясь ответа:
Для просмотра ссылки Войди или Зарегистрируйся
Код:
if (screen.width < 533) {
  $('#viewport').attr('content', 'width=533, maximum-scale=0.7');
}
 

Alabama

Создатель
Регистрация
30 Июн 2014
Сообщения
34
Реакции
5
Как вариант сразу добавить мета-тег в хед
Код:
<meta name="viewport" content="width=533">

Кстати, с maximum-scale=0.7 - на сколько вам удобно на практике? По опыту скажу что лучше вообще не ограничивать и не прописывать этот параметр. Или вот так написать:

Код:
<meta name="viewport" content="width=533, initial-scale=1" />
 
Сверху