Как изменить масштабирование html страницы?

Question

[Glace]

Делаю сайт, хочу сделать кнопки для увеличения уменьшения масштаба страницы, чтобы дублировали функционал Ctrl + колесо прокрутки. Возможно ли сделать такое посредством javascript / css / третий вариант? Считывать масштаб как я нагуглил можно посредством devicePixelRatio, а как его устанавливать так и не нашел.
Заранее спасибо за ответы.

Answer 1

[alexalexes]

Взять самый большой блок страницы и масштабировать через transform:

document.body.style.transform = 'scale(' + ваше_значение + ')';

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

Comments

[Glace]

Вариант с transform: scale() не подходит потому что он растягивает страницу а не увеличивает ее масштаб.
Если указывать 1 параметр то страница становится больше по ширине и появляется скролл, если указывать 2 параметра чтобы бала ширина 1 а высота х, он растягивает страницу по высоте.
При стандартном масштабировании браузера такого не происходит, увеличивается только шрифт сказал бы я, но похоже что это тоже не так, потому что при изменении размера шрифта на тег body иногда ?съезжают стили?( текст выходит за границы контейнеров ), когда при стандартном масштабировании браузера такого поведения не наблюдается.
Я просто искал простое и красивое решение которое бы завелось из коробки и поехало )
PS: А вообще, как-то не все пользователи такие же прошареные как программисты, большинство из них не знает про функцию масштабирования браузера, даже не то что про хот кеи, а вообще что меню браузера можно показать нажатием клавиши Alt.