web-dev-qa-db-ja.com

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

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

firefoxgoogle-chromeprivacywebweb-development
3
Ivan

興味深い質問です。理論的には、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を介して）UserScriptを使用すると、次のスクリプトが目的の効果を発揮します（使用するには、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で可能な解決策。

2
zelanix