Как изменить DPI/pixel ratio/zoom/size/scale страницы через JS или CSS?

Question

[zeuss56]

Хочу сделать слайдер для изменения DPI сайта аналогично Ctrl + и Ctrl -, так как у мобильных браузеров нет зума. Так же было бы интересно изменять DPI по жесту "щипок". Не нагуглил ничего путного :(

Answer 1

[dom1n1k]

Ну единственное, что приходит на ум - менять скриптом тэг meta viewport.
Но я очень сильно не уверен, что это будет работать - кажется, этот тег обрабатывается только один раз при загрузке страницы.
Скорее всего, это вообще невозможно.

Comments

[zeuss56]

Можно обновлять страницу внутри фрейма с вьюпортом. Надеюсь, сработает.

[dom1n1k]

Без участия бек-энда - нельзя.

[zeuss56]

dom1n1k, единственное что приходит на ум - безумные идеи, вроде хардкорного изменения размеров всех элементов через css, то есть уменьшить/увеличить все шрифты/картинки/блоки или ещё хардкорнее - отрисовать всю страницу в канвас и его уже зумить. Естественно, всё должно проходить на клиенте, иначе будет глючить и зависить от скорости соединения.

Answer 2

[Bhudh]

transform: scale(sx[, sy]);
Только с чего Вы взяли, что в мобильных браузерах нет зума?
Прекрасно всё двумя пальцами и дабл-тапом зумится.

Comments

[zeuss56]

Вы наверное не понимаете что такое DPI и никогда не нажимали ctrl + ?
К тому же я писал:

Так же было бы интересно изменять DPI по жесту "щипок".

В некоторых мобильных пдф-вьюверах по щипку не приближается текст, а изменяется его размер, мне это понравилось)

[zeuss56]

jsbin.com/siqokituno/1/edit?html,output
Совсем не похоже на то, о чем я говорил.