視網膜iPad的具體CSS

我正在設計一個響應式網站，在移動設備上看起來不同。我在我的css中有三個單獨的媒體查詢以及一個查看視網膜顯示的查詢。視網膜iPad的具體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，它應該是我猜。

例如，在移動版本中，我在屏幕上居中顯示一個背景圖像，但在常規網站上，它左對齊。

任何人都知道一種方法只針對iPad的視網膜圖像只在CSS？

感謝

編輯：這就是我正在玩弄，但它似乎並沒有工作：

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

來源

2012-03-20 user127181

新的iPad是2048年由1536年...嘗試和像素比：2 – Connor 2012-03-20 19:27:46

感謝您的答覆，嘗試它，不，沒有工作。 @media screen and（min-device-width：1536px）and（max-device-width：2048px）and（orientation：landscape）and（-webkit-min-device-pixel-ratio：2）{} – user127181 2012-03-20 19:34:43

您是否看到我的答案，你使用的是真正的iPad3，對吧？ – Connor 2012-03-20 20:01:46

嘗試：

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

來源

2012-03-20 19:39:15 Connor

嗨，是的，我看到你的答案，但它不起作用。但我只使用iOS模擬器。但是，所有其他媒體查詢都可以使用模擬器正常工作。我很難過。 – user127181 2012-03-20 21:12:32

我似乎無法得到這個在我的iPad視網膜上工作。它每次都會忽略它。如果我將其更改爲@media屏幕和（max-width：960px）和（orientation：landscape）和（-webkit-device-pixel-ratio：2），它將起作用。我檢查了三倍，以確保我的ipad實際上是一個iPad視網膜（而且我沒有受到欺騙），並且型號編號作爲合法的iPad視網膜迴歸。思考？ – MatthewLee 2012-11-06 00:06:41

@MatthewLee嗯，我現在最好的猜測就是它必須處理最大寬度和最大設備寬度。你使用的是iPad 3還是4？ – Connor 2012-11-06 00:22:39

想通了。

我的iPad視網膜查詢低於所有其他查詢，但他們需要從其他查詢開始，從最大到最小。

來源

2012-03-21 19:01:58 user127181

+10

你應該接受你的答案作爲正確的答案，並把你使用的正確的代碼放在一起，這樣總會有你最初的問題引用到正確的用正確的代碼回答。謝謝。 – 2012-11-05 04:01:41

我有同樣的問題，我解決了使用：

@media only screen and (max-width: 960px), only screen and (max-device-width: 960px) and (-webkit-device-pixel-ratio: 1.5)

對於中繼檢視我用：

content="width=device-width; initial-scale=1; maximum-scale=1"

我不知道這是一個完美的解決方案，但它的工作原理。

來源

2012-06-27 07:11:22 Walli

視網膜iPad的具體CSS

回答

相關問題