Javascript 为什么Nexus 4（使用Android的Chrome）显示的窗口大小为384x519，而屏幕截图显示的是768x1038？

我使用媒体查询根据屏幕大小提供不同的比例。但是屏幕大小没有向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版本的主图像。我想为Nexus4服务，而不是它得到的480 x 250缩小图像。我该怎么做呢？

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

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

阻力最小的途径是由硬件制造商决定。有时他们会弄错（iPad Mini），但通常这是最简单也是最好的做法。通过对每个报告的像素使用多个实像素，可以很好地渲染文本。因此，“标准”16px字体大小在小屏幕上看起来会非常漂亮，而实际上它是像32px文本一样绘制的

---

（不，您不能强制浏览器执行任何不同的操作。）

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