Как масштабировать верстку под 320пикселей?

Question

[Lara B]

Мобильный макет начинался от 375пикс , теперь верстка на экранах 320 дает скролл Как можно прописать масштабирование контента для экранов меньше 375?
буду благодарна за любую подсказку, ничего путного не нагуглила

Comments

[Froggyweb]

pixet perfect - зло. Особенно если следовать этому вслепую.

[Lara B]

Froggyweb, да нет, не в пикселе дело, дает скролл горизонтальный

[Lara B]

Froggyweb, причем предупреждала об этом заказчика

[Сергей delphinpro]

Переверстать нормально.
Или использовать быстрый хак с тегом вьюпорт

content="width=375px" – и на любой ширине сайт отмасштабируется.

Правда нужно отслеживать ширину экрана, и в точке 375 переписывать это значение между 375 и device-width

[Антон Литвиненко]

Для боди min-width 320 вместо 375

[Lara B]

Сергей delphinpro, пробовала, почему-то не сработало

[Lara B]

Сергей delphinpro, скрин

[Froggyweb]

Lara B, вообще обычно додумывается самостоятельно, либо если заказчик серьезный или вариантов нет идет обсуждение с дизайнером и заказчиком. Если верстка для компании ХYZ, то предлагаем свое решение, либо созвон (и хотя бы устно решить проблему что с этим делать) если переделка будет затратной по времени/деньгам

[Froggyweb]

Сергей delphinpro, ну на фиг. очень хреновый совет, особенно для новичка

[FrelFrloich]

Визуально явно же проситься блок с пиццей, флекс колумн на мобиле. В чём проблема прописать самостоятельно? заказчику объяснить что не возможно впихнуть не впихуемое без каких либо последствий для эстетики. На скрине проблема вроде как и в этом состоит, текст не влезает, прилипает к картинке что само по себе уже не очень.

[Сергей delphinpro]

Froggyweb, нормальный хак, если нужно по-быстрому впихнуть невпихуемое. Тут делов-то написать пару строк javascript кода и воткнуть в заголовок страницы.

Lara B, включите мобильный вид, или проверяйте на реальном смарте.

[Сергей delphinpro]

Lara B, https://gist.github.com/delphinpro/a962978d668b63e...

[Lara B]

Сергей delphinpro, Супер! Спасибо! Так и думала, что в сторону js надо смотреть

[lUser L]

* {
outline: 1px solid red;
}

Добавь это в цсс, и так намного проще будет дебажить, наглядно будет видно какой элемент косячит. Мне часто помогает

[Lara B]

Эмиль 🔥, Эмиль, классно, действительно все гениальное просто Спасибо огромное за такой лайфхак

[Ankhena]

Lara B,
просто * не хватит

* {
outline: 1px solid red;
}
*::before, *::after{
outline: 1px solid green;
}

Или можно и в один цвет.
И про outline-offset не забывайте. Сам outline может оказаться скрыт за overflow.

[Ankhena]

Lara B, а по делу: да, быстрый хак - менять вьюпорт. Но всё таки лучше переверстать нормально.
То, что дизайнер нарисовал макет для 375 вовсе не значит, что верстальщику не нужно думать о более мелких вьюпортах. Как и в другую строну, о 4 и 8к тоже не нужно забывать, не смотря на то, что дизайнеры под них не рисуют.

Answer 1

[true]

масштабируй контент через transform scale в зависимости от размера

Comments

[Lara B]

нет, не помогает, слои продолжают накладываться.

[Сергей delphinpro]

transform не изменяет занимаемое элементом пространство, поэтому скролл останется.

[true]

Сергей delphinpro, посмотри этот лендинг - www.xn-----6kcajelbfea1acvziavlfowce6d4t.xn--p1ai

[true]

Сергей delphinpro, вроде бы такой способ работает - протестируй у себя

[HelpSophie]

!?, не видно только ничего, а так норм способ.

Answer 2

[Матвей Феникс]

А препроцессоры есть? scss например.
Я делаю так - ссылка

1 прямоугольник пропорционально масштабируется, 2 нет