響應CSS查詢不能適用於iOS的iPad AIR 2

Question

編輯:::::

想通了答案---正確的查詢是

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) 

---

@media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) { 

/*** 
    my css goes here 
**/ 

} 

不知道爲什麼這是行不通的。這是我的理解，這個查詢將專門針對我的iPad Air 2並應用我添加的樣式。但是，沒有應用，它看起來與桌面視圖相同。我必須爲我的網站應用不同的菜單才能在我的iPhone上正確滾動（溢出-y：滾動/隱藏不起作用，因此我創建了多個顯示菜單選項的部分，而不是在div中顯示內容），但是我因爲他們也不能正確滾動，所以他們遇到了針對iPad的麻煩。

Answer 1

在iPad上航2

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) 

Answer 2

以下作品查詢之前將這個元標記：

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

你可以閱讀更多關於它在這裏：Responsive Meta Tags

你可能不想將所有的桌面和移動CSS全部放在同一頁面中，但要鏈接到不同的工作表。這樣可以節省初始加載時間，並且不會浪費時間加載它們。像這樣：

<link rel='stylesheet' media='only screen and (min-width: 821px)' href='css/big.css' /> 
<link rel='stylesheet' media='only screen and (max-width: 820px)' href='css/little.css' />