Retina iPad专用CSS

Question

我正在设计一个在移动设备上看起来与众不同的响应式网站.我的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) {}

当iPad处于纵向模式时,它将获得移动版本,但是当它处于横向模式时,它将获得该网站的常规版本.

我的问题是这个,现在使用"新iPad"和视网膜显示器,某些视网膜图像没有正确对齐视网膜iPad版本.全球视网膜css正在推翻普通的CSS,我认为这应该是.

例如,在移动版本中,我有一个以屏幕为中心的背景图像,但在常规网站上,它左对齐.

有人知道只在CSS中针对iPad定位视网膜图像的方法吗？

谢谢

编辑:这是我正在玩的东西,但它似乎不起作用:

@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {}

Answer 1

弄清楚了.

我的iPad Retina查询低于所有其他查询,但它们需要高于从最大到最小的其他查询.

Answer 2

尝试：

@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
}