在启用视网膜屏幕的设备上使用媒体查询

Question

3

Javascript告诉我，我的Galaxy S3屏幕分辨率为720x1280。但是文档报告的分辨率为360x567。

有可能使文档更准确地反映屏幕分辨率吗？也许在视口上使用initial-scale？

我似乎无法做到！

澄清一下，我知道我设备的分辨率在竖屏模式下为720像素宽，但是当在网页上放置元素时，该元素以360像素的宽度填充页面，因为设备为每个CSS像素使用了2个硬件像素。我可以停止设备这样做吗？

- michael

你能再解释一下吗？你的页面只在那个设备上填充了部分屏幕吗？ - ralph.m

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- FelipeAls · Accepted Answer

首先，为什么大部分时间不使用那些信息（来自于 Quirksmode 上 PPK 关于 devicePixelRatio 的文章）

Retina iPhones 在纵向模式下宽度是 640 物理像素。但是，使用 meta viewport 的网站不应该变成 640 像素宽，而应该保持在 320 像素宽，这是 iPhone 的最佳阅读尺寸。

其次，当您仍希望针对高分辨率设备（由 Apple 称为“Retina”）进行定位时，您应该阅读跨浏览器 Retina / 高分辨率媒体查询，其中最短的代码片段如下：

@media 
  only screen and (-webkit-min-device-pixel-ratio: 2), 
  only screen and (min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

但是还有其他链接，以及与Windows Phone、Opera Mini、Firefox OS和现有的不同比例相关的三篇有趣文章和更新。