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.