window.screenX 和 window.screenY 不应该在移动设备上的浏览器上工作吗？答案

【问题标题】：Shouldn't window.screenX and window.screenY work on browsers on mobile devices?window.screenX 和 window.screenY 不应该在移动设备上的浏览器上工作吗？
【发布时间】：2020-04-30 10:08:34
【问题描述】：

当我在桌面 Chrome 上登录 window.screenX 时，我看到了 1920 的值

当我在手机和 iPad 上的 Safari 和移动设备上执行相同操作时，我会看到 0 或一些非常奇怪的值。

来自 MDN Link:

问题

这不是应该在桌面和移动设备、设备和浏览器上都可以使用吗？

【问题讨论】：

标签： javascript html dom browser cross-browser

【解决方案1】：

您实际上想返回什么信息？来自您的 MDN link：

返回：

一个等于从浏览器视口左边缘到屏幕左边缘的 CSS 像素数的数字。

您的移动设备上的浏览器是否处于窗口模式？因为在全屏模式下，与大多数移动设备浏览器一样，它应该始终返回0，因为在设备屏幕的左侧和浏览器窗口的开头之间没有像素。

您实际上是在尝试测量屏幕左侧和浏览器视口开始之间的空间，还是您真的在尝试获得整个屏幕的水平分辨率？如果是后者，您正在寻找的可能是window.screen.width 属性。该属性的文档可以在 MDN 上的 here 找到。

【讨论】：

你是对的。完全误读了。无论缩放级别如何，我都在疯狂地试图找出一种获取视口大小的方法，尽管screenX 会帮助我。我认为它会给我屏幕尺寸而不是浏览器窗口尺寸，但事实并非如此，正如您正确指出的那样。谢谢。
顺便说一下，我在我的电脑上看到的是 1920，因为我有两台显示器，而 Chrome 浏览器目前在右侧全屏显示。
是的，我知道? 我已经假设这就是原因。感谢您为我确认！很高兴我能帮助你。祝你项目的其余部分好运！
你知道window.screen.width是以CSS像素还是实际屏幕像素显示的？从我的测试来看，它似乎是 CSS 像素，尽管我期待实际的屏幕像素，因为 API 名称 screen。我没有看到文档中的信息。你知道吗？
我大约 95% 确定它正在返回 CSS 像素。该属性是在 CSSOM（CSS 对象模型）（specification here）下指定的，所以我认为这是一个很好的提示，它是 CSS 像素。另外，在另一个SO thread about media queries 中，有一条评论说它是CSS 像素。