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

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

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

 

Короче говоря, как обычно, нашел решение, не дожидаясь ответа:
https://www.quirksmode.org/blog/archives/2011/06/dynamically_cha.html

Код:

if (screen.width < 533) {
  $('#viewport').attr('content', 'width=533, maximum-scale=0.7');
}

 

Как вариант сразу добавить мета-тег в хед

Код:

<meta name="viewport" content="width=533">

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

Код:

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