2

我正在使用媒体查询来根据屏幕尺寸提供不同的比例。但是屏幕尺寸没有向 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 缩小图像。我该怎么做？

4

1 回答 1

3

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

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

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

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

于 2013-04-10T23:12:49.173 回答