Как по клику на кнопку увеличить масштаб страницы?

Question

[Сергей Горячев]

Есть есть кнопка, как при клике на нее увеличить или уменьшить масштаб страницы?
Как бы аналог кнопок Ctrl+ и Ctrl-.

Answer 1

[Кандрашкин Алексей]

Можете попробовать выставлять zoom для body в css. Ну и соответственно менять его значение яваскриптом.

body{
    zoom: 150%;
}

P.S. работает вроде бы везде кроме FF.

Comments

[Кирилл Кубляков]

Только не zoom, а transform: scale(1.5);

[Кандрашкин Алексей]

Кирилл Кубляков: При transform: scale(1.5); если я не путаю появится горизонтальный скролл, что не очень хорошо.

[Сергей Горячев]

Кандрашкин Алексей: Нужно везде, хотя бы в последних версиях.

[Кандрашкин Алексей]

Sergey Goryachev: Ну если вас горизонтальный скролл в FF не смущает, можете юзать

body{
    zoom: 150%;
    -moz-transform: scale(1.5);
}

[Сергей Горячев]

Кандрашкин Алексей: Так не только скролл, но и вообще блок увеличивается так, что не вмещается. И его не видно.

[Кандрашкин Алексей]

Sergey Goryachev: Возможно вам нужно добавить
transform-origin: top left;
если я правильно проблему понял

[Сергей Горячев]

Кандрашкин Алексей: Плохое решение, конечно, но годится, спасибо. Странно, что до сих пор не придуман зум для всех браузеров.

Answer 2

[Владислав Токарев]

Вот пример таких кнопок: тык

Comments

[Кандрашкин Алексей]

Они в FF не работают. Там как раз свойство zoom меняется, которое лиса не поддерживает.

[Владислав Токарев]

Кандрашкин Алексей: Хорошо, а если так?

[Сергей Горячев]

Владислав Токарев: Появляется горизонтальный скролл, при чем левую часть нереально прочитать. От этого таблетку Кандрашкин Алексей написал в решении выше.

Answer 3

[Андрей]

Все размеры в rem и при клике менять размер шрифта у body