jquery - クリック時にブラウザのズームインを有効にする方法

Question

ユーザーがボタンをクリックしたときにブラウザーのズーム効果を追加したいと考えています。これは高齢者向けなので、テキストを拡大して読みやすくすることができます。Webページのレイアウトが台無しになるため、実際のテキストを大きくしたくありません。これどうやってするの？

いくつかのサイトで、同様の機能を実現する AAA ボタンを見てきました。

Answer 1

必要に応じて、タグ上のアクティブなクラスを切り替える3つの異なるボタンを作成でき、各クラスにはフォントサイズの定義が必要です。

<a data-size="small">small</a>
<a data-size="normal">normal</a>
<a data-size="large">large</a>

$("a").on("click", function(){
    $("html").removeClass().addClass($(this).data("size"));
});

html.small{font-size:12px;}
html.normal{font-size:20px;}
html.large{font-size:36px;}

Answer 2

ブラウザの直接制御自体は、スクリプトによって駆動されるべきではありません。場合によっては危険です。ブラウザーはさまざまな方法でズームを実装しており、私の知る限り、これを行うための「ネイティブ API」はありません。

最も近いのは、画像とフォントのサイズを変更することです。あなたが望んでいた答えではないことはわかっています。