How to customize screen resolution reported to a JavaScript application by a web browser?

Solution 1:

Interesting question. It is possible in theory to overwrite the window.screen.availHeight and window.screen.availWidth properties using the Object.defineProperty function.

Try the following file:

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>

However, to answer your question of a generic way to make this happen on all sites, I can only provide a partial answer.

Using UserScripts (through Greasemonkey) on Firefox the following script has the desired effect (to use, install the Greasemonkey add-in then restart Firefox and drag the script onto the Firefox window).

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; }});

Now if test.html is opened again it can be seen that the screen resolution before the overwrite is already reset providing the desired results.

Unfortunately Chrome does not support running code such as this before the document is loaded so this UserScript does not work there. I have posted this answer in the hope that someone can hint at a possible solution in Chrome.

How to customize screen resolution reported to a JavaScript application by a web browser?

Solution 1:

Related

Recent Posts