如何在常规浏览器中向服务器隐藏/篡改真实窗口尺寸？

这完全可行，以下是两种无需无头浏览器、纯常规浏览器环境下的实现方案：

1. 用户脚本（User Script） #

通过Tampermonkey、Violentmonkey这类用户脚本管理器，注入代码重写窗口尺寸相关属性的获取逻辑，让页面获取到的是你指定的缩小后尺寸。

示例脚本：

// ==UserScript==
// @name           修改窗口尺寸上报值
// @match          *://*/*
// @run-at         document-start
// ==/UserScript==

// 重写窗口核心尺寸属性
Object.defineProperties(window, {
  innerWidth: { get: () => window.screen.width / 4 },
  innerHeight: { get: () => window.screen.height / 4 },
  outerWidth: { get: () => window.screen.width / 4 },
  outerHeight: { get: () => window.screen.height / 4 }
});

// 覆盖文档根元素的尺寸属性（部分页面会用这个获取视口大小）
Object.defineProperties(document.documentElement, {
  clientWidth: { get: () => window.screen.width / 4 },
  clientHeight: { get: () => window.screen.height / 4 }
});

脚本会在页面加载前执行，把所有获取窗口/视口尺寸的调用都返回原尺寸的1/4，完全属于常规浏览器操作，不会触发无头检测。

2. 自定义浏览器扩展 #

如果担心用户脚本受页面CSP（内容安全策略）限制，可以开发一个极简浏览器扩展，通过内容脚本注入同样的逻辑。

以Chrome扩展为例，先创建manifest.json：

{
  "manifest_version": 3,
  "name": "窗口尺寸修改工具",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "run_at": "document_start"
    }
  ]
}

再把上面用户脚本的核心代码放到content.js中，打包后安装到浏览器即可，权限更稳定，同样是真实浏览器环境。

额外提示 #

• 如果部分网站还会读取screen.width/screen.height，可以用同样的方法覆盖这些属性，但修改屏幕尺寸可能会影响页面响应式布局，按需调整即可。
• 两种方案都不会触发无头浏览器检测逻辑，因为本质是在真实浏览器中修改页面可访问的全局属性。

内容的提问来源于stack exchange，提问作者MKSOI