ブラウザの拡大率をJavaScriptでリセットする方法

Question

ブラウザといっても色々ありますが、今回はGoogleChromeという前提で質問させていただきます。

実現したいこと

ブラウザの拡大もしくは縮小後、Ctrl+0かリセットボタンを押すことでブラウザの拡大縮小率をリセットすることが出来ますが、それをJavaScriptで操作したいです。
例で言うと、ブラウザ上のボタンをクリックすると拡大縮小率がリセットされる、といったものを作成したいです。

しかし調べてもそういったものが出てこないので、そもそも実現可能かどうかすらわからないです。

実現可能ならどのように実装すればいいか、
不可能なら代替手段としてどのような方法があるか教えてほしいです。

よろしくお願いします。

Comments

[m.ts10806]

何をどう調べたのでしょう

[K-actus]

ブラウザの拡大縮小率を取得する方法についてです。

Answer 1

拡大率はブラウザ自体の機能なので厳しいと思います

transform: scale(num);

とからめて大きめ(小さめ)に表示したりすることは可能です

sample

<style>
body {
transform-origin: top left;
}
body.big {
transform: scale(1.5); 
}
body.small {
transform: scale(0.7); 
}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
  big.addEventListener('click',()=>{
    document.body.classList.remove('small');
    document.body.classList.add('big');
  });
  regular.addEventListener('click',()=>{
    document.body.classList.remove('big');
    document.body.classList.remove('small');
  });
  small.addEventListener('click',()=>{
    document.body.classList.remove('big');
    document.body.classList.add('small');
  });
});
</script>
<input type="button" value="big" id="big">
<input type="button" value="regular" id="regular">
<input type="button" value="small" id="small">
<hr>
あああ
<img src="http://placeimg.com/400/240/any">

Answer 2

ズーム率を正確に知る手段がなく、現状では不可能だと思います。

ズーム率を知ることができれば、yambejp さんが書かれている transofrm プロパティや、WebKit 系(含 Chromium) だけで使える zoom プロパティで逆変換をかけてあげればできそうですけども。

1ピクセルがディスプレイの1ピクセルに一致している環境(つまりRetina Macやスマートフォン・タブレットは該当しない)に限定すれば、window.devicePixelRatio でズーム率を取得することはできますが、対象が限定されるので実用的ではないでしょう。