目標移動設備與CSS（iPad，iPhone），但排除非移動設備

我試圖針對移動設備（特別是iPad和iPhone），但使用CSS3媒體查詢相同的樣式添加到相同的其他設備分辨率，如筆記本電腦。如何添加移動設備特定樣式而不將其添加到其他非移動設備？目標移動設備與CSS（iPad，iPhone），但排除非移動設備

到目前爲止我使用這一點，它增加了對CSS是1,024像素寬下的所有設備，甚至與方向選擇：

@media only screen and (min-device-width: 320px) and (orientation:portrait), 
         (max-device-width: 1024px) and (orientation:landscape){ 
      // Do something 
}

編輯： 任何有興趣，我這隻需通過複製媒體查詢，但略微改變重複即可工作。這是迄今爲止做的最有效的方式，但更主要的是它的工作原理：

@media only screen and (min-device-width: 320px) and (orientation:portrait), 
        (max-device-width: 1024px) and (orientation:landscape){ 
     // some styling 
} 

@media only screen and (min-device-width: 320px) and (orientation:portrait), 
        (max-device-width: 768px) and (orientation:portrait){ 
     // some styling 
}

來源

2012-04-11 mmmoustache

也許看看this，在部分「7.3公認的媒體類型」，會幫助你。

來源

2012-04-11 08:53:45

感謝您的提示，這似乎適用於橫向模式，但縱向模式被忽略！任何想法爲什麼會發生這種情況？我簡直就是在上面的代碼中只換了'只有手機'的'屏幕'。 – mmmoustache 2012-04-11 10:10:43

我看到你編輯你的問題並自己回答，但你可能有興趣使用最小寬度和最大寬度，而不是min-device-width和max-device-width。 – 2012-04-11 15:12:46

是的，你的答案真的有幫助！我會給你一個鏡頭，聽起來像我需要整理代碼。再次感謝！ – mmmoustache 2012-04-11 15:47:24

是：desktop browsers support the orientation media query too。

我不認爲媒體查詢提供了一種方法來檢測設備是iPad還是iPhone。它們允許您檢查設備的特徵（如寬度和方向），而不是識別設備。

什麼讓你的風格不適合非iPad設備？

來源

2012-04-11 09:14:41

啊，那就是爲什麼！不幸的是，對我來說，設計師設計的網站是1040px寬，所以我只需要調整css – mmmoustache 2012-04-11 10:12:48

@mmmoustache：doh，這很令人沮喪。我建議只針對寬度 - 那些支持媒體查詢的瀏覽器的用戶將瀏覽器窗口的大小減少到1040以下，也可以從您的調整後的樣式中受益。 – 2012-04-11 10:53:19

我發現，你需要的是在你編輯的第二個媒體查詢：

@media only screen and (min-device-width: 320px) and (orientation: portrait), 
    (max-device-width: 768px) and (orientation: portrait) { 
    // some styling 
}

它的工作就像一個魅力！

來源

2015-08-27 00:28:36

目標移動設備與CSS（iPad，iPhone），但排除非移動設備

回答

相關問題