☰

如何自定义网络浏览器向 JavaScript 应用程序报告的屏幕分辨率？

tag-icon • tag-icon firefox google-chrome privacy web web-development
如何自定义网络浏览器向 JavaScript 应用程序报告的屏幕分辨率？

window.screen.availHeight和window.screen.availWidth值让 Web 应用程序知道我的实际屏幕分辨率，而我并不总是希望它们知道。我可以为这些属性设置自己的值吗？我对 Firefox 和 Chrome 的解决方案都很感兴趣。

答案1

有趣的问题。理论上可以使用函数覆盖window.screen.availHeight和属性。window.screen.availWidthObject.defineProperty

尝试以下文件：

测试.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 上使用 UserScripts（通过 Greasemonkey），以下脚本具有预期的效果（要使用，请安装 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 中的可能解决方案。

相关内容