Здравствуйте. Никому не секрет, что, несмотря на высокое разрешение экранов мобильных девайсов, в браузере мобильных устройств отображается верстка других размеров. Так, к примеру, у 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" />
