2015-07-01 30 views
0

我的媒體查詢似乎不適用於ipad。網站是http://www.purplesale.com。在過去的CSS我已經申請媒體查詢爲iPad -我的網站在iPad上的媒體查詢失敗

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
#mainContent, #container, #sidebar, #content, #footer, #betaSpacer { 
    width: 765px; 
    overflow: hidden; 
} 
// Other queries targeting ipad 

} 
/*End*/ 

完整的CSS是在這裏 - http://www.purplesale.com/Css/main.css

視區元設定爲 -

<meta name="viewport" content="width=device-width, initial-scale=1" /> 

請在解決問題的幫助。

+0

什麼是 '一個iPad' 的裝置寬度? – sevenseacat

+0

768px * 1024px適用於所有ipad – yogihosting

回答

0

如果Ipad的與視網膜顯示器(ipad的3 & 4)

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */} 
+0

-webkit-min-device-pixel-ratio:2的使用有什麼必要讓ipad媒體查詢起作用? – yogihosting

+0

正如你在上面提到的那樣,所有5個不同的iPad(iPad 1-5和iPad mini)具有相同的分辨率768x1024,並且可以使用相同的媒體查詢進行定位。但ipad 3和4帶有視網膜顯示,如果你想要媒體查詢特定於我們可以使用的設備-webkit-min-device-pixel-ratio:2 for others -webkit-min-device-pixel-ratio:1 –

+0

現在只有我注意到你給的CSS,有時候這個問題可能與媒體查詢的順序有關。請刪除其他媒體查詢並檢入ipad –