媒体查询视网膜显示

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标签对每个设备制定特定的媒体限制。否则，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) { ... }

祝你的项目好运！