Windows 11 与 macOS 如何获取屏幕坐标（设计师 / QA 测试指南）

Windows 11 如何获取屏幕坐标

Windows 提供多种内置和第三方方法来查找 X/Y 坐标。选择哪种方法取决于你需要快速一次性测量，还是持续实时追踪工作流。

方法一：使用内置在线屏幕坐标工具（无需安装）

基于浏览器的屏幕坐标工具是获取精确坐标的最快方式，无需安装任何软件。在 Chrome 或 Edge 中打开工具，按 F11 进入全屏模式，将鼠标移动到任意位置即可实时读取 X/Y 坐标。

1. 在 Chrome、Edge 或 Firefox 中打开屏幕坐标工具。
2. 点击全屏按钮或按 F11。
3. 将鼠标移动到任意位置，精确的 X/Y 值会实时更新。
4. 按锁定按钮或点击以冻结坐标供复制。

方法二：使用 PowerShell 查找鼠标坐标

Windows 11 内置的 PowerShell 可以通过 .NET 类获取鼠标位置。打开 PowerShell 并运行以下命令：

Add-Type -AssemblyName System.Windows.Forms
$pos = [System.Windows.Forms.Cursor]::Position
Write-Output "鼠标坐标: X=$($pos.X), Y=$($pos.Y)"

每次运行脚本都会返回当前鼠标指针的精确屏幕坐标。

方法三：使用 AutoHotkey 在 Windows 11 上获取坐标

AutoHotkey 是 Windows 自动化的高级工具。以下脚本在按下 F1 时显示当前鼠标坐标：

F1::
{
    MouseGetPos &x, &y
    MsgBox "鼠标坐标: X=" x " Y=" y
}

其他方法：内置画图应用

自 1985 年以来，每台 Windows PC 都包含画图应用，其状态栏在图像上悬停时显示实时像素坐标。这非常适合从静态截图测量坐标。

1. 按 PrtSc（Print Screen）将桌面截图复制到剪贴板。
2. 打开画图应用（在开始菜单中搜索"画图"）。
3. 按 Ctrl+V 粘贴截图。
4. 在图片上移动鼠标，查看画图窗口左下角的实时 X、Y 坐标。

Windows 多显示器行为

Windows 将多个显示器视为单一虚拟桌面。主显示器承载 (0, 0) 原点。放在左侧的显示器产生负 X 坐标；放在上方的显示器产生负 Y 坐标。可通过打开设置 > 系统 > 显示，观察显示器矩形相对排列来验证布局。

macOS 如何获取鼠标坐标

macOS 提供了优雅的坐标发现内置工具，但 Retina 显示器缩放模型引入的抽象层可能让习惯 Windows 的用户一开始感到困惑。

方法一：内置截图十字线（Cmd + Shift + 4）

这是最快的原生方法，无需安装任何软件。

1. 按 Command (⌘) + Shift + 4。
2. 光标变成带实时 X、Y 数字的精密十字准线。
3. 移动到目标位置并读取坐标。
4. 按 Esc 取消而不保存截图文件。

方法二：在线追踪工具（复制粘贴工作流）

如果需要将精确坐标复制到脚本中或记录一系列位置，Web 工具比记忆十字准线数字更实用。

1. 在 Safari 或 Chrome 中打开屏幕坐标工具。
2. 用 Control + Command + F（Safari）或 F11（Chrome）进入全屏模式。
3. 移动鼠标实时追踪并复制精确的 X/Y 位置。

macOS Retina 显示器警告

大多数现代 Mac 使用 Retina 显示器，设备像素比为 2.0（Pro Display XDR 上更高）。macOS 默认使用"缩放"分辨率，在 2880 x 1800 面板上看起来如同 1440 x 900。Cmd+Shift+4 十字准线显示逻辑点坐标，而非物理像素。

如果自动化脚本（如 Python + PyAutoGUI、AppleScript 或 Hammerspoon）需要物理像素坐标，将十字准线值乘以你的后备缩放因子：

# macOS 逻辑点到物理像素转换
logical_x, logical_y = 720, 450  # Cmd+Shift+4 的值
backing_scale = 2.0              # 大多数 Retina Mac 为 2.0
physical_x = int(logical_x * backing_scale)
physical_y = int(logical_y * backing_scale)

要编程确定精确的后备缩放因子，Swift 中使用 NSScreen.main?.backingScaleFactor，或在终端中运行 system_profiler SPDisplaysDataType | grep "Retina" 确认显示器类型。

辅助功能检查器（开发者）

macOS 开发者可以使用 Xcode 捆绑的 辅助功能检查器 检查 UI 元素的屏幕坐标和窗口坐标。这在为原生 macOS 应用编写 AppleScript 或 UI 自动化测试时特别有用。

UI/UX 设计师的屏幕坐标工作流

在 Figma、Adobe XD、Sketch 或 Photoshop 中设计像素级完美界面需要精通开发者使用的坐标系统。忽略坐标转换的设计交接是实施不匹配的温床。

概念一：画板坐标 vs 全局坐标

设计工具使用相对坐标系统，如果文档记录不当会混淆开发者。

• 画板坐标：在 Figma 或 Sketch 中，特定画板或框架的左上角始终是 (0, 0)。位于 (120, 80) 的元素距离画板左边缘 120px，距离顶部 80px。
• 全局坐标：在物理显示器上，整个屏幕的左上角是 (0, 0)。我们的 Web 工具测量的是全局屏幕坐标，而非画板相对坐标。

交接规格时，始终标注 X/Y 值是相对于父容器、画板还是全局视口。常见约定是添加注释如："除非另有说明，所有坐标相对于画板左上角。"

概念二：X/Y 到 CSS 的转换

设计中的 X 和 Y 值在使用绝对定位时直接映射到 CSS 属性：

/* Figma：元素在 400x300 容器内位于 X=120, Y=80 */
.pixel-perfect-element {
  position: absolute;
  left: 120px;   /* 对应 Figma X */
  top: 80px;     /* 对应 Figma Y */
  width: 160px;  /* Figma 宽度 */
  height: 40px;  /* Figma 高度 */
}

概念三：用坐标数学验证间距

与其目测两个按钮是否均匀分布，不如用坐标数学验证：

/* 如果按钮 A 在 X=200 结束，按钮 B 在 X=220 开始，
   间距为 20px。如果两个按钮宽 80px 且应有 16px 内边距，
   预期间距应为 16px。
   220 - 200 = 20px。这宽了 4px。 */

将设计导出为静态图像，加载到屏幕坐标工具中，悬停在边缘确认间距值是否与设计系统令牌匹配。

设计 QA 工作流

设计 QA——验证实现后的网页是否与原始设计匹配——使用此工作流：

1. 并排打开 staging 网站和 Figma 文件。
2. 在设计的精确目标视口宽度下截取网页截图。
3. 在设计工具中将截图叠加在 Figma 框架上，或使用 PerfectPixel 等浏览器扩展。
4. 使用坐标工具测量特定元素的偏移。即使 1-2 像素的偏差在知道预期位置时也是可见的。

QA 测试与自动化的屏幕坐标

Selenium、Playwright 和 Cypress 等自动化 UI 测试框架优先使用基于 DOM 的选择器（ID、data-testid、ARIA 标签）。但在某些场景下屏幕坐标是必需的：基于 Canvas 的游戏、WebGL 可视化、复杂绘图应用、遗留桌面封装器和操作系统级宏测试。

方法一：浏览器开发者工具（Web QA）

标准 Web 测试中，可以使用内置浏览器工具提取元素坐标，无需外部库。

1. 右键点击目标元素并选择检查。
2. 在元素面板中，计算的盒模型显示宽度、高度、内边距和外边距。
3. 精确的视口相对坐标，打开控制台并运行：

   // 获取相对于视口的边界矩形
   const rect = document.querySelector('[data-testid="submit"]').getBoundingClientRect();
   console.log(rect.x, rect.y, rect.width, rect.height);
   
   // 将视口坐标转换为文档坐标
   const docX = rect.x + window.scrollX;
   const docY = rect.y + window.scrollY;

方法二：桌面自动化与全局坐标

测试非 Web 应用或使用 PyAutoGUI 和 AutoHotkey 等工具时，需要绝对全局显示器坐标。

1. 在全屏模式下打开屏幕坐标工具。
2. 将鼠标移动到你要测试的应用区域。
3. 记录 X 和 Y 值。
4. 输入自动化脚本：

   import pyautogui
   # Windows 上确保 DPI 感知优先
   # （详见技术指南）
   pyautogui.click(x=840, y=620)
   pyautogui.sleep(0.5)
   pyautogui.typewrite("测试输入", interval=0.01)

方法三：基于截图的回归测试

视觉回归测试中，坐标用于定义"忽略区域"（有意变化的区域，如时间戳）或"差异热点"（必须保持像素完全相同的区域）。

// Playwright 示例：像素级视觉比较
// 对时钟区域使用忽略区域
await expect(page).toHaveScreenshot('dashboard.png', {
  clip: { x: 0, y: 0, width: 1280, height: 720 },
  // 某些工具允许遮罩特定坐标范围
});

视口 vs 屏幕：决策框架

QA 最佳实践

• 优先使用 DOM 选择器而非坐标。仅当目标没有稳定选择器时才使用坐标（Canvas、WebGL、视频叠加层）。
• 在目标视口尺寸下记录坐标。响应式布局在不同断点会改变元素位置。
• 考虑操作系统缩放。在 100% 缩放的开发者机器上通过的测试，可能在 125% 缩放的 CI 运行器上失败。平台特定修复请参阅我们的技术指南。
• 记录坐标假设。在测试套件中包含 README，说明坐标测试的预期屏幕分辨率、浏览器缩放级别和操作系统缩放。

使用 Python (PyAutoGUI) 获取屏幕坐标

PyAutoGUI 是跨平台的 Python 自动化库，可以在 Windows 11 和 macOS 上获取屏幕坐标并执行鼠标操作。以下是完整的获取坐标工作流。

安装与基础使用

pip install pyautogui

import pyautogui

# 获取当前鼠标位置
current_x, current_y = pyautogui.position()
print(f"当前鼠标坐标: ({current_x}, {current_y})")

# 获取屏幕尺寸
screen_w, screen_h = pyautogui.size()
print(f"屏幕尺寸: {screen_w}x{screen_h}")

Windows 11 上的 DPI 感知设置

在 Windows 11 上，如果显示缩放不是 100%，必须在导入 PyAutoGUI 之前声明 DPI 感知：

import ctypes
import pyautogui

# 在使用 pyautogui 之前声明 DPI 感知
ctypes.windll.user32.SetProcessDPIAware()

# 现在 pyautogui.size() 返回物理像素
width, height = pyautogui.size()
print(f"物理屏幕尺寸: {width}x{height}")

# 移动到指定坐标并点击
pyautogui.moveTo(960, 540, duration=0.5)
pyautogui.click()

macOS 上的 Retina 处理

macOS 上的 PyAutoGUI 通常能正确处理 Retina 显示器，因为 Quartz API 向未缩放进程报告物理尺寸。如果从截图或 Cmd+Shift+4 读取坐标，需要乘以 DPR：

# macOS：逻辑点转物理像素
logical_x, logical_y = 720, 450
backing_scale = 2.0  # 大多数 Retina Mac 为 2.0
physical_x = int(logical_x * backing_scale)
physical_y = int(logical_y * backing_scale)

pyautogui.moveTo(physical_x, physical_y)
pyautogui.click()

平台对比速查表