css - 媒体查询视网膜显示

Question

我有这个 css 代码，可以在视网膜显示器上显示一个 div。

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape){#warning-message,#wrapper{display:block;}}

问题是我不希望它在 Mac 上显示，而只在 iPhone 和 iPad 上显示。我怎样才能更具体地针对目标？

Answer 1

在浏览器中访问您的开发人员工具(我为此使用 Chrome，按 F12)并确定您要修改的屏幕尺寸(Chrome 在左上角)。例如，如果您查找具有 11 英寸屏幕的 macbook，它只有 1366 x 768，但您最大的 ipad 将是 768 x 1024。您可以通过在 CSS 标签中使用“and”来为每个设备设置特定的媒体限制。否则，take a look at this link for more specific detail on the CSS media queries ，您可能有一个“不是'...'并且是 Retina”选项。

@media not all and (monochrome) { ... }
@media (min-width: 700px) and (orientation: landscape) { ... }

祝你的元素好运!