在网页上获取 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) 显示器使用 this question 的建议...

• 使用来自 the accepted answer 的建议。

使用$(window).height()：

使用$(document).height()：

使用screen.height:

• 使用 this answer 的建议：

• 使用 this answer 的建议：

• 使用 this answer 的建议：

• 使用 this answer and this answer and this answer 的建议：

• 使用来自 this answer 的建议：

• This suggestion是一个插件的自我推荐。我先把这个传下去。

• This suggestion 使用 Coffee 解决方案。我暂时坚持 JavaScript 和 jQuery。

• 使用 this answer 中的这个建议（重复了一些其他答案）：

• This suggestion 需要外部库。我先把这个传下去。

• 使用 this answer 的建议：

• This suggestion 已合并到上面的其他一些答案中。

---

Answer 1

1) How can I obtain a value of 1280 to match the resolution height of the Surface Pro 3?

你试过了吗

 window.outerHeight 

还有吗？

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

2) Why am i getting 8xx instead of 1280?

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

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

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

Answer 2

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

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

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

Answer 3

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

Answer 4

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

var screenHeight = window.devicePixelRatio * screen.height;

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

需要注意的重要一点是 innerHeight（window 的大小，没有浏览器 UI）和 outerHeight（window 的大小，有浏览器 UI) 是相对于浏览器 window。如果你想知道浏览器的大小 window.

，你应该使用那些而不是 screen.height