Retina iPad 特定 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9780189/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Retina iPad Specific CSS
提问by user127181
I'm designing a responsive site that will look different on mobile devices. I have three separate media queries in my css plus a query for retina display(s).
我正在设计一个在移动设备上看起来不同的响应式网站。我的 css 中有三个单独的媒体查询以及一个对视网膜显示的查询。
/** 768PX IPAD PORTRAIT **/
@media screen and (max-width: 768px) {}
/** 480PX IPHONE LANDSCAPE **/
@media screen and (max-width: 480px) {}
/** 320PX PORTRAIT **/
@media screen and (max-width: 320px) {}
/** RETINA IMAGES **/
@media all and (-webkit-min-device-pixel-ratio: 2) {}
When iPad is in portrait mode, it will get the mobile version, but when it's in landscape mode it will get the regular version of the site.
当 iPad 处于纵向模式时，它将获得移动版本，但当处于横向模式时，它将获得网站的常规版本。
My problem is this, now with the "new iPad" and retina display, certain retina images are not aligned properly for the landscape retina iPad version. The global retina css is overruling the regular css and it's supposed to I guess.
我的问题是，现在有了“新 iPad”和视网膜显示器，某些视网膜图像在风景视网膜 iPad 版本中没有正确对齐。全局视网膜 css 否决了常规 css，我猜应该是这样。
For example, in the mobile version, I have an background image centred on the screen, but on the regular site, it's left aligned.
例如，在移动版本中，我有一个背景图像在屏幕中央，但在常规站点上，它是左对齐的。
Anyone know of a way to target only retina images for iPad only in CSS?
任何人都知道一种仅在 CSS 中仅针对 iPad 的视网膜图像的方法？
Thanks
谢谢
Edit: This is what I was playing around with but it doesn't seem to work:
编辑：这就是我在玩的东西，但它似乎不起作用：
@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {}
回答by user127181
Figured it out.
弄清楚了。
I had my iPad Retina query below all other queries but they needed to be above the other queries starting from largest to smallest.
我的 iPad Retina 查询低于所有其他查询，但它们需要高于其他查询，从最大到最小。
回答by Connor
Try:
尝试：
@media only screen
and (min-device-width: 1536px)
and (max-device-width: 2048px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {
// Retina iPad specific CSS
}
回答by Walli
I had the same problem and I solved using:
我遇到了同样的问题，我使用以下方法解决了：
@media only screen and (max-width: 960px), only screen and (max-device-width: 960px) and (-webkit-device-pixel-ratio: 1.5)
For meta viewport I use:
对于元视口，我使用：
content="width=device-width; initial-scale=1; maximum-scale=1"
I don't know if this is a perfect solution, but it works.
我不知道这是否是一个完美的解决方案，但它有效。
