javascript - 在网页上获取 Surface Pro 3 的高度

Question

我的笔记本电脑有一台分辨率为 1920x1080 的显示器和一台分辨率为 1920x1280 的 Surface Pro 3。我正在开发一个专为在 1920x1080 和 1920x1280 显示器上全屏查看而设计的网页。

我已经确认了每个显示器的设置（见下文）。

为什么我得到的是 8xx 而不是 1280？如何获得 1280 的值以匹配 Surface Pro 3 的分辨率高度？

---

1920x1080 显示器（在 Windows 8 上）：

1920x1280 (Surface Pro 3) 显示屏（在 Windows 10 上）：

---

在我的 1920x1080 显示器上使用$(window).height()，我得到以下信息：

这对我行得通。

---

但是，将此问题的建议用于我的 1920x1280 (Surface Pro 3) 显示器...

• 使用已接受答案中的建议。

使用$(window).height()：

使用$(document).height()：

使用screen.height：

• 使用此答案的建议：

• 使用此答案的建议：

• 使用此答案的建议：

• 使用来自这个答案和这个答案和这个答案的建议：

• 使用此答案中的此建议：

• 这个建议是一个插件的自我推荐。我现在将传递这个。

• 此建议使用咖啡解决方案。我现在将坚持使用 JavaScript 和 jQuery。

• 使用这个答案中的这个建议（它反刍了其他一些答案）：

• 此建议需要一个外部库。我现在将传递这个。

• 使用此答案的建议：

• 该建议已合并到上面的其他一些答案中。

---

Answer 1

1）如何获得1280的值来匹配Surface Pro 3的分辨率高度？

你有没有尝试过

 window.outerHeight 

然而？

我在您的测试用例中看到的只是内部高度。那只是向您展示浏览器将呈现的内容（像素将被缩放等。减少您实际拥有的可用宽度）

2) 为什么我得到的是 8xx 而不是 1280？

基本上，浏览器会缩放文本/图像/等，以在多种分辨率下提供一致的体验。即使您正在为 1280 屏幕构建它，您的可用性也可能只有 8xx 像素。

有关像素化的更多信息，我建议您阅读：

http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

Answer 2

您的 Surface Pro 3 似乎使用 150% 的操作系统范围缩放系数。因此，浏览器返回宽度 1280 和高度 853（如 1280 * 1.5 = 1920 和 853 * 1.5 = 1280）。在控制面板中将 Windows 的缩放系数切换为 100%，您的浏览器将按预期返回宽度和高度。

Answer 3

这是一个适用于 Firefox、Chrome、IE11 和 Edge 的解决方案。我没有要测试的 Mac，但这也应该在那里工作。您需要考虑设备像素比。这是一个示例（JSBin）：

var screenHeight = window.devicePixelRatio * screen.height;

无论设备的 DPI 如何，这将为您提供屏幕尺寸。

需要注意的重要一点是innerHeight（不带浏览器 UI 的窗口大小）和outerHeight（带浏览器 UI 的窗口大小）是相对于浏览器窗口的。screen.height如果您想知道浏览器窗口的大小，则应该使用它们。

Answer 4

在浏览器中，您处理的是 CSS 像素的抽象，而不是物理像素。报告给您的大小很可能是正确的（除非有一个奇怪的浏览器错误在起作用），所以窗口的高度是 853 CSS 像素。

我的建议是使用那个尺寸。使用媒体查询等调整布局。不要试图猜测浏览器；不要针对浏览器供应商和网络标准积极试图向您隐藏的硬件细节进行优化。

（如果有时间，我稍后会尝试扩展此答案。对概念的正确解释是博客文章的长度。）