window.screen.width/height 不应该对应于实际的屏幕宽度/高度吗？

Posted 2023-04-14

【中文标题】window.screen.width/height 不应该对应于实际的屏幕宽度/高度吗？

【英文标题】：Shouldn't window.screen.width/height correspond to actual screen width/height?

【发布时间】：2011-04-11 18:03:00

【问题描述】：

在新的 Kindle 3G 中使用 WebKit 浏览器时，我注意到 window.screen.width 和 window.screen.height 不反映实际的屏幕尺寸。物理屏幕（或者更确切地说，纸张）尺寸为 800 x 600。我明白了：

800 x

506

横向模式 600 x

706

纵向模式

但有趣的是，在我的桌面上运行的 Chrome 和 Safari（它们也是 WebKit）都会报告实际的屏幕分辨率。

根据MDC，这些属性不属于任何规范，因此可能没有严格定义应报告的宽度/高度。但是，难道不应该期望它们反映实际的屏幕尺寸吗？

【参考方案1】：

更新：

我们在带有 window.screen.width 的模拟器中看到的问题是我们使用的屏幕不能反映设备的实际像素。因此，您在屏幕上看到的是 320，而设备拥有的是 480 或其他。不过，我不明白为什么屏幕宽度的值会给出模拟器在屏幕上的大小，而不是实际的像素。

这件事可能与设备有相同的问题？如果它们的密度在某些尺寸下更高......无论出于何种原因，这可能会转化为一些错误的屏幕宽度尺寸？

无论如何，请阅读下面的解决方案。

---

screen.availWidth 不适用于模拟器上的某些屏幕尺寸。

现在唯一对我有用的是：

window.innerWidth
window.innerHeight

这将返回视口的值。就我而言，我正在运行一个 html5 应用程序。显然，此值不会在缩放时更新。

他们在 android 的 Webkit 上对这种尺寸有一些问题。您可以看到来自 Android talking about it here 的开发人员。可能固定在 Honeycomb 中。

有人声称它需要一些尺寸，就像软键盘一样。

【参考方案2】：

我认为如果 WebKit 从系统中获取错误的值，它什么也做不了。当然这些值应该由screen.availWidth和screen.availHeight表示，但我认为这与鼠标（指针）位置的event.screenX和event.screenY有关。

【讨论】：

有趣的是，navigator.appVersion 在横向和纵向模式下都会报告 5.0 (Linux; U; en-US) AppleWebKit/528.5 (KHTML, like Gecko, Safari/528.5 ) Version/4.0 Kindle/3.0 (screen 600x800; rotate)。即使600x800 位是正确的，我猜它是硬编码的，而不是从系统中读取的。所以，你是对的，可能是系统没有正确（？）报告屏幕尺寸。

【参考方案3】：

在许多移动操作系统上，screen.availWidth 和 screen.width 似乎都一直返回availWidth。

我无法找到任何关于此的文档，但是我确实测试了 Android 2.2，并且无论请求什么，我都得到了屏幕尺寸减去顶部菜单栏。

【讨论】：

除了移动操作系统上的 webkit 之外，我还没有在其他任何东西上测试过这个，但是我发现了多个故障点和其他一些奇怪的地方。第一个奇怪的地方是 screen.height 在 Linux 和 webkit（以及它的 prefork khtml）上一起工作。然而在 kindle 和 Android 上却失败了，它们都以 linux 和 webkit 为核心。这导致开始考虑其他可能性，例如 SquirrelFish 是不良数据的分发者。

【参考方案4】：

区别在于Android状态栏和/或底栏的大小。