支持Retina的设备上的媒体查询 [英] Media queries on retina enabled devices

问题描述

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

Javascript tells me that my Galaxy S3 has a screen resolution of 720x1280 But the document is reported as 360x567.

可以获取文档以更准确地反映屏幕分辨率？在视口上的初始尺度可能？

Is it possible to get the document to more accurately reflect the screen resolution? Initial-scale on the viewport perhaps?

我似乎无法管理它！

为了说明，我知道我的设备分辨率在纵向模式下为720像素宽，但是当在网页上放置元素时，元素会填充宽度为360像素的宽度，因为设备正在使用每个css像素有2个硬件像素。

To clarify, I know my device resolution is 720px wide in portrait mode, however when putting an element on a webpage the element fills the width of the page at 360px wide because the device is using 2 hardware pixels for each css pixel. Can I stop the device from doing this?

推荐答案

首先，为什么不在大多数时间使用这些信息关于 devicePixelRatio 的Quirksmode

First, why not to use that information most of the time (from PPK at Quirksmode about devicePixelRatio)

Retina iPhones在纵向模式下的宽度为640个物理像素。
仍然，使用meta视口的网站不应该变成640px
宽，而是保持在320，这是
的iPhone的最佳阅读大小。

Retina iPhones have a width of 640 physical pixels in portrait mode. Still, websites that use the meta viewport should not become 640px wide, but instead remain at 320, which is the optimal reading size for the iPhone.

其次，当你仍然想要特别定位高分辨率设备（Apple称为Retina）时，应该阅读跨浏览器视网膜/高分辨率媒体查询，其中最短的片段为：

Second, when you still want to target specifically high resolution devices (called Retina by Apple), you should read Cross Browser Retina/High Resolution Media Queries where the shortest snippet is:

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

但还有其他人，还链接到3个有趣的文章和有关Windows Phone，Opera Mini，Firefox OS和现有的不同比率的更新

but there are others and also links to 3 previous interesting articles and updates about Windows Phone, Opera Mini, Firefox OS and different ratios that now exist

这篇关于支持Retina的设备上的媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！