Как масштабировать интерфейс сайта на FireFox?

Question

[Артур Кранц]

Интерфейс сайта (например хедер) задан в пикселях, определенная высота. На больших экранах, типа 4к, данный интерфейс выглядит слишком мелким и было решено его увеличить с помощью css свойства zoom. Проблема в то что в браузере firefox это свойство не поддерживается и интерфейс отображается мелким, хотя в том же chrome все увеличивается. Как эту проблему можно решить?

Answer 1

[Sergey Mukhin]

Использовать rem вместо px.
1 rem = 1 x размер шрифта html
1.5 rem = 1.5 x размер шрифта html и т.д.
Когда нужно масштабировать сайт, менять размер шрифта:

html {
  font-size: 16px;
}

Comments

[Артур Кранц]

это получается весь сайт надо переделывать, а это невероятно много времени займет, может есть вариант по практичнее?

[Sergey Mukhin]

Попробуй такой костыль

html {
  transform: scale(1.5);
  transform-origin: top left;
  width: 66.66%;
}

transform: scale – увеличивает содержимое
transform-origin: top left – делает это от верхнего левого угла
Появится горизонтальный скрол, поэтому пропорционально уменьшаем ширину контейнера width: 66.66% (100% / 1.5)

Но лично я бы перешёл на rem единицы. Иногда лучше перелопатить, чем дальше закапываться в неудачное решение.