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

Тема в разделе "Другие языки", создана пользователем drkrol, 3 июл 2017.

XEvil 4.0 Релиз Состоялся!
  1. drkrol

    drkrol Постоялец

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

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

    drkrol Постоялец

    Регистр.:
    6 мар 2016
    Сообщения:
    110
    Симпатии:
    10
  3. Alabama

    Alabama Создатель

    Регистр.:
    30 июн 2014
    Сообщения:
    34
    Симпатии:
    5
    Как вариант сразу добавить мета-тег в хед
    Код:
    <meta name="viewport" content="width=533">
    Кстати, с maximum-scale=0.7 - на сколько вам удобно на практике? По опыту скажу что лучше вообще не ограничивать и не прописывать этот параметр. Или вот так написать:

    Код:
    <meta name="viewport" content="width=533, initial-scale=1" />