如何定位iPad的CSS，但使用媒體查詢排除Safari 4桌面？

我正在嘗試使用媒體規則將CSS僅指向iPad。我想排除iPhone/iPod和桌面瀏覽器。如果可能，我想也排除其他移動設備。如何定位iPad的CSS，但使用媒體查詢排除Safari 4桌面？

我用

<style type="text/css" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)">

但剛發現桌面Safari 4的讀取它。我試圖用「481px」的變化，而不是「768px」，另一個是增加了一個定位到：

<style type="text/css" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">

，但沒有運氣。（稍後我們將嗅探iPad的用戶代理字符串，但現在該解決方案將無法工作。）

謝謝！

更新：似乎桌面Safari使用此時的屏幕寬度和高度，並根據此自定義縱向或橫向。它看起來並不像寬度和高度會排除桌面瀏覽器（除非我錯過了某些東西）。

http://mislav.uniqpath.com/2010/04/targeted-css/

來源

2010-04-20 Miriam Salzer

本文可能有幫助：http://www.sitepoint.com/blogs/2010/04/20/identify-apple-iphone-ipod-ipad-visitors/ – 2010-04-21 00:22:04

media="only screen and (device-width: 768px)"

感謝MislavMarohnić的答案！

這適用於iPad在任何方向，似乎排除桌面Safari。

當我測試(min-device-width: 768px) and (max-device-width: 1024px) 我可以看到Safari 4使用樣式或忽略它們，因爲我加寬或縮小了窗口。當測試(device-width: 768px)我試圖讓桌面Safari瀏覽器正好786px寬，但我從來沒有看到它的風格。

來源

2010-04-21 18:37:28

這是一個非常聰明的把戲。不要忘記接受答案。（你能接受你自己的嗎？） – 2010-04-21 18:42:10

我發現一個案例，當頁面位於應用程序的webview中時，css被忽略。這可能是一個邊緣案例，我不知道。該網站有一個硬編碼的大小，並給予iPhone的useragent，即使它是一個iPad。 – 2010-05-05 18:12:44

這是一個相當simlifying示範： http://css-tricks.com/snippets/css/ipad-specific-css/

來源

2011-02-13 20:24:54 Katzenfresser

在這裏你可以找到蘋果公司的HTML參考庫的HTML元標記：[鏈接]（http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html） – Katzenfresser 2011-02-14 09:35:54

我使用PHP來做到這一點。我從USER_AGENT字符串中隔離平臺。然後我只需要使用if($plateform == 'iPad') {.....} 就是這麼簡單！

來源

2011-06-21 18:13:59 Maze

可能會有助於發佈您的所有代碼。 – 2011-12-19 20:18:56

我同意，檢查瀏覽器代理是否在服務器端包含「ipad」，然後包括指定的樣式表是定位iPad的最準確方式。標記爲答案的解決方案將影響所有設備。 – Americus 2012-01-25 23:12:50

如何定位iPad的CSS，但使用媒體查詢排除Safari 4桌面？

回答

相關問題