Как мне сделать так, чтобы мой сайт выглядел точно так же в 1920 x 1080 и 3840 × 2160?

Question

Представьте себе сайт, полный компонентов и текстов, и он хорошо работает на экране ноутбука с разрешением 1920 x 1080.

Если проецировать изображение с ноутбука с разрешением 1920 x 1080 на дисплей 3840 × 2160, оно будет выглядеть одинаково на обоих экранах, возможно, немного размыто из-за масштабирования.

Но как добиться такого же результата с экраном ноутбука 3840 × 2160, чтобы он выглядел точно так же, как на ноутбуке 1920 x 1080?

Предположим, у меня есть способ обнаружить, если разрешение выше 1920 x 1080. Простое использование масштабирования не приведет к желаемому результату.

преобразование: масштаб (2);

... так как сайт будет просто растягиваться вне макета. Что-то вроде масштабирования каждого шрифта, изображения или чего-либо, что не определено в процентах.

В моей голове есть идея, что если бы вы каким-то образом могли остановить расширение сайта шире, чем 1920px (по плотности) и заполнить пробел путем пропорционального масштабирования контента, но звучит ли это как безумие, какой-нибудь совет?

Answer 1

В CSS есть свойство zoom, как упоминал Роберт Харви.Чтобы дважды масштабировать компонент, добавьте эту строку в контейнер HTML:

zoom: 2;

Но это не поддерживается ни в одной версии Firefox.Вы все еще можете добиться аналогичного эффекта в Firefox, если вы все масштабируете и пропорционально уменьшите ширину:

-moz-transform: scale(2);
-moz-width: 50%;
-moz-transform-origin: top left;

Это будет работать, если вам не нужна горизонтальная прокрутка, НО добавляет полосу прокрутки на страницу, которая может неприсутствовать с zoom, а также масштабировать полосы прокрутки внутри элемента, делая их жирными (что не проблема, если вам не нужны полосы прокрутки внутри контейнера).