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

Question

[del993788]

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

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

Answer 1

[monochromer]

Через JavaScript проверять размеры экрана и динамически менять тег viewport
https://www.quirksmode.org/blog/archives/2011/06/d...

Comments

[del993788]

Подождите, у меня вёрстка фиксированная в 533. Какой смысл мне менять viewport? Ну стал viewport 375, и что толку? Один фиг: горизонтальный скрол есть.

[Kovalsky]

qqignatqq: насколько я понял, вам нужно чтобы рендерился сайт на 533 пикселя ширины, а потом пропорционально ужимался до 375, то есть макет вам нужен не резиновый, а как бы наоборот - фиксированный, я правильно понял?

[del993788]

Да. Спасибо за наводку. Почитал ещё больше и, по сути, использовал ваш вариант.

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

[Kovalsky]

qqignatqq: верно, но всё же если быть точным, то initial/maximum-scale надо устанавливать равным отношению ширины девайса к целевой ширине:

$('#viewport').attr('content', 'width=533, initial-scale=' + (screen.width / 533).toFixed(4));

Например в случае с андроидом на 360 пикселей это соотношение будет равно 360/533 = ~0.6754. Если вы ставите 0.7, то (в случае например с тем же андроидом на 360) страница будет отрендерена на ширину 515 пикселей.

К тому же в некоторых случаях всё равно появляется скролл (например если вылезли какие-то элементы), его можно скрыть:

html, body {
    overflow-x: hidden;
}

[Иван]

qqignatqq: т.е. по вашему костылинг JS+CSS это лучший вариант чем нативный CSS Media Quaries?

[del993788]

Иван: Иван, ты дурак? Чистый Quaries тут бессилен. Прочти вопрос еще раз или приведи пример, где на iphone 7 с шириной экрана в 375px будет отображаться фикс верстка в 533px, а на обычном fullhd мониторе будет отображаться фикс верстка на 1200px. Жду fiddle.

Хотя смысл его ждать, если это нереально. Ты не вникся в суть проблемы и отвечаешь

Answer 2

[Иван]

https://developer.mozilla.org/en-US/docs/Web/CSS/M...
shpargalkablog.ru/2013/06/layout.html

Answer 3

[Владимир]

https://developer.mozilla.org/ru/docs/Mozilla/Mobi...