WebブラウザーによってJavaScriptアプリケーションに報告される画面解像度をカスタマイズする方法は？

window.screen.availHeightwindow.screen.availWidth値を使用すると、Webアプリケーションは実際の画面解像度を知ることができますが、常に知りたいとは限りません。これらのプロパティに独自の値を設定できますか？FirefoxとChromeの両方のソリューションに興味があります。

— イワン
ソース

興味深い質問。理論上、関数を使用してwindow.screen.availHeightおよびwindow.screen.availWidthプロパティを上書きすることは可能Object.definePropertyです。

次のファイルを試してください。

test.html：

<html>
  <head>
    <script>
      window.alert("Window resolution before overwrite is " + window.screen.availWidth + " x " + window.screen.availHeight);
      Object.defineProperty(window.screen, "availWidth", { get: function(){return 0; }});
      Object.defineProperty(window.screen, "availHeight", { get: function(){return 0; }});
    </script>
  </head>
  <body>
    <script>
      window.alert("Window resolution after overwrite is " + window.screen.availWidth + " x " + window.screen.availHeight);
    </script>
  </body>
</html>

ただし、すべてのサイトでこれを実現する一般的な方法の質問に答えるために、部分的な回答のみ提供できます。

Firefoxで（Greasemonkeyを介して）UserScriptsを使用すると、次のスクリプトに目的の効果があります（使用するには、GreasemonkeyアドインをインストールしてからFirefoxを再起動し、Firefoxウィンドウにスクリプトをドラッグします）。

Hide_screen_resolution.user.js：

// ==UserScript==
// @name          Hide screen resolution
// @description   This script hides access to the screen resolution through window.screen.availHeight and window.screen.availWidth values.
// @include       *
// @run-at document-start
// ==/UserScript==

Object.defineProperty(window.screen, "availWidth", { get: function(){return 0; }});
Object.defineProperty(window.screen, "availHeight", { get: function(){return 0; }});

test.htmlを再度開くと、上書き前の画面解像度が既にリセットされ、目的の結果が得られていることがわかります。

残念ながら、Chromeはドキュメントが読み込まれる前にこのようなコードを実行することをサポートしていないため、このUserScriptはそこで動作しません。誰かがChromeで可能な解決策を示唆できることを期待して、この回答を投稿しました。

— ゼラニクス
ソース