Адаптивная верстка, как можно решить данную проблему?

Question

[Тимофей Белоусов]

Всем доброго времени суток, суть проблемы в следующим!
Зайдем из далека! Есть 3 вида макетов 480, 768, 960! Проблема в том, что при разрешение меньше 480px верстка начинает потихоньку ехать, я хочу узнать, можно ли, как-нибудь зафиксировать верстку (если ширина устройства меньше 480px) и смаштабировать ее на 320-ти пикселях (ну или какое там разрешение будет), то есть засунуть 480px в 320px или 360px. То есть, что я хочу по сути, надо чтобы на устройствах ≤ 480px показывалась минимальная верстка в 480px. Если просто ставить min-width 480px, то появляется скролл, на меньших устройствах, а он ни есть хорошо! Выручайте ребята, может есть у кого какие идеи? Использую foundation!

Answer 1

[Ксения Михайлова]

Можно при изменении размеров экрана при достижении определенной величины фиксировать viewport

if (screen.width <= 480) {
 document.getElementById("viewport").setAttribute("content", "width=480; initial-scale=0.5");
}

Comments

[Тимофей Белоусов]

Serj-One: А что это? Что по вашему такое адаптив?

[Тимофей Белоусов]

Serj-One: То есть если в верстке присутствуют костыли, то это уже не адаптивная верстка? Мда... По поводу, как сделать правильно, я писал, мне не нужен четвертый медиа запрос, мне нужно просто грамотно смаштабировать при определенных условиях, это весь смысл моего вопроса, если не найду грамотного решения, то придется пилить под 320. Я хочу узнать есть ли какие-либо способы решения моего вопроса.... Это все, что я хочу узнать из заданного мной вопроса...

[Тимофей Белоусов]

Serj-One: Добавил данный "Костыль" который привела Ксения Бутузова и все отлично работает, никаких проблем!

[Ксения Михайлова]

Тимофей Белоусов: мне этот метод удобен тем, что до 480 пикселей в ширину можно писать медиа, а меньше контент не помещается, или еще что-то явно мешает (формы, изображения, етц), и проще сайт в целом вмещать в окно просмотра/устройства. А эту задачу уже можно переложить на само устройства - телефоны умные, масштабировать умеют.

[Тимофей Белоусов]

Serj-One: А чем собственно плох такой метод??? Я себя считаю не плохим специалистом, не претендую на какиe-либо звания типа Senior, я просто знаю своё дело и если мне, что-то интересно, я считаю нужным это выяснить. Правильно Ксения написала, есть такие элементы, которые просто физически не подходят под 320px. Кстати не красиво кидать камни в чужой огород....

Answer 2

[Виталий Киренков]

Наверное так:
blog.teamtreehouse.com/thinking-ahead-css-device-a...

Ксения Бутузова - по сути предложила то же самое, просто чуть кривовато, ибо это можно сделать из стилей.

Answer 3

[Pavel]

на 480px верстка должна стать статической. То есть не проценты, а пиксели должны быть значениями ширины, высоты и т.д. В калькуляторе перегоните из процентов в пиксели. И еще viewport scale на всякий случай посмотрите

Answer 4

[Евгений Низамиев]

Делайте резиново + относительные единицы измерения.
Например использовать em везде, тогда при ширине меньше 480 можно просто изменить размер шрифта у body и все блоки станут меньше.

Comments

[Nikolay Talanov]

Скорее уж не em, а rem. С em запросто можно сойти с ума на 3+ уровне вложенности :)

[Евгений Низамиев]

Nikolay Talanov: кому как, у меня пока не было каких-либо сложностей с em.