Retina显示像素比率和媒体查询

Question

如何让我的max-width媒体查询在视网膜显示器上工作？我已经尝试过我在macbook air上创建的网站，因为像素比率为2，我的媒体查询在错误的屏幕宽度上处于活动状态。

这是我如何使用媒体查询的一个例子;

@media only screen and (max-width: 1800px){ }

Answer 1

您需要使用-webkit-min-device-pixel-ratio: 2定位视网膜2x

类似的东西：

@media (-webkit-min-device-pixel-ratio: 2) { 
    /* Retina-specific stuff here */
}

或使用类似的东西：

@media (-webkit-min-device-pixel-ratio: 2) and (max-width:1800px) { 
    /* Retina-specific stuff here */
}

有关此内容的更多信息，您可以在此article

中看到

Answer 2

从问题的描述看来，您似乎没有使用视口元标记

<meta name="viewport" content="width=device-width, initial-scale=1">

以上内容应解决您的问题。

请参阅https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Answer 3

摘自Mike King在HD & Retina Display Media Queries上的文章（我建议阅读，因为它遍历了针对各种高清设备（不仅仅是Retina）的CSS定位）

如果您只想定位Retina显示器，请设置 min-device-pixel-ratio：2＆min-resolution：192dpi应该没问题。

因此，您可以这样做：

@media ((min-device-pixel-ratio: 2) and (min-resolution: 192dpi) and (max-width:1800px)) { 
    /* Your Retina-specific code goes here */
}