为什么 Nexus 4（使用 Chrome for Android）显示窗口大小为 384x519 但屏幕截图显示 768x1038？答案

【问题标题】：Why is Nexus 4 (using Chrome for Android) showing window size as 384x519 but screenshot shows 768x1038?为什么 Nexus 4（使用 Chrome for Android）显示窗口大小为 384x519 但屏幕截图显示 768x1038？
【发布时间】：2013-04-10 23:10:31
【问题描述】：

我正在使用媒体查询来根据屏幕尺寸提供不同的比例。但是屏幕尺寸没有向 CSS 显示正确的数字。在 Nexus 4 上，显示使用我的“480px”CSS 样式并在 Javascript 中显示：

//Javascript shows these:
window.innerHeight == 519
window.innerWidth == 384

//CSS uses this rule:
@media screen and (orientation:portrait) and (min-width: 361px) {...}

手机浏览器的屏幕截图显示可见窗口为 768 x 1038，正好是我显示的高度和宽度的两倍。

有没有办法让 CSS 和 javascript 使用实际的分辨率？我想根据分辨率提供不同的图像尺寸，以便他们获得适合其屏幕分辨率的最高分辨率图片。

例如，我有一个 768 x 400 版本的主图像。我想将它提供给 Nexus 4，而不是它所获得的 480 x 250 缩小图像。我该怎么做？

【问题讨论】：

标签： javascript css mobile responsive-design

【解决方案1】：

移动浏览器会报告他们想要的任何屏幕尺寸。浏览器“像素”不一定是真正的像素。

我的 HTC One X 有一个 1280x720 的屏幕，报告为 640x360。

阻力最小的途径是将其留给硬件制造商。有时他们会弄错（iPad Mini），但通常这是最简单和最好的事情。通过每个报告像素使用多个真实像素，可以很好地呈现文本。因此，当它真的像 32 像素文本一样被绘制时，“标准”16 像素字体大小在小屏幕上会非常好看。

（不，你不能强迫浏览器做任何不同的事情。）

【讨论】：

好的，听起来好像没有其他选择。我希望我能提供更高分辨率的图像，但我可能会得到一部报告真实数字的电话，如果我提供的是报告的 2 倍，那将是一个沉重的图像。感谢您的帮助！
@DonRhummy 有无数关于响应式网页设计的图像大小调整的博客文章 - 这是一个复杂的话题，但有一些相当好的解决方案可用。
是的，我正在使用它们，但它们仍在提供报告大小的图像，而不是屏幕的实际像素大小。这就是我问的原因。
@DonRhummy 有一个媒体查询可让您检查“设备像素比”。我知道有一些涉及该测试的图像处理技术。