Как настроить масштабируемость для контента?

Question

[Dyadko_Orest]

Хочу настроить масштабирование на своём проекте используя мета-теги. Пробовал использовать <meta name="viewport" content="width=1200" /> и

<meta name="viewport" content="width=device-width, initial-scale=1.0">

, но они работают не совсем так, как мне нужно. Например, если у меня есть блок размером 1000px и на экране в 1200px он будет стоять посередине с небольшими отступами по бокам, можно ли как-то его масштабировать чтобы на экранах шириной например в 420px не появлялась горизонтальная прокрутка и блок не выходил за предел экрана, а чтобы он масштабировался и выглядел точно также как и на большом экране, то есть блок посередине и по бокам отступы. Или это невозможно сделать не меняя ширину блока?
Вот иллюстрация того, как я это вижу:

Comments

[Alex_mos]

Попробуйте задать блоку ограничивающую ширину, горизонтальное выравнивание и паддинг. Что то типо такого.
.wrapper{
max-width:1200px;
width:100%;
margin:0 auto;
padding:0 15px
}

[Dyadko_Orest]

Alex_mos, Попробовал но если у внутреннего блока будет задана своя ширина он все равно будет вылезать за пределы экрана, однако спасибо за ответ

[Alex_mos]

Dyadko_Orest, а вы также задавайте ему определенный максимальный размер(max-width), что бы при уменьшении размера экрана он тоже уменьшался

[Ankhena]

Alex_mos, вы можете указать фикс ширину в meta viewport и отступы для блока. Но вообще это не очень качественный вариант. Может оказаться, что шрифт (или какие-то блоки) на мобилках уже не видно либо браузер поступит с ним по своему усмотрению, а не так, как вам хочется.

Разумнее всё таки делать адаптивную верстку. Так, чтобы на любом устройстве при любой ширине вьюпорта сайт смотрелся хорошо и удобно читался.

Контейнеру обычно ограничивают ширину или задают фикс ширины на разных вьюпортах.

Попробовал но если у внутреннего блока будет задана своя ширина

Вы можете использовать % или единицы fr для гридов или другие адаптивные единицы. А также пользоваться богатыми возможностями флексов и гридов для адаптива.

Answer 1

[Иван К]

Можно задавать размеры в VW и VH тогда они будут масштабироваться вместе с экраном.

Answer 2

[true]

используй css-трансформацию scale
коэффициент масштабирования вычисляй зная размер окна и исходный размер блока