媒體查詢或有條件的CSS針對Safari瀏覽器在iPad/iPhone？

我一直在使用媒體查詢來改變iPhone和iPad用戶的電子郵件。基本上，我已經成功地使用'郵件'爲這些設備訪問電子郵件，但是當使用Safari訪問以登錄到任何電子郵件客戶端時，電子郵件將作爲桌面版本進行響應。媒體查詢或有條件的CSS針對Safari瀏覽器在iPad/iPhone？

下面是我使用的是什麼：

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { 
/// REST OF MY CODE HERE /// 
} 

@media only screen and (max-device-width: 480px) { 
/// REST OF MY CODE HERE /// 
}

後有點研究，我也試過

@media only screen and (max-device-width: 480px) and(-webkit-min-device-pixel-ratio:0) { 
/* CSS Statements that only apply on webkit-based browsers (Chrome, Safari, etc.) */ 
/// REST OF MY CODE HERE /// 
}

幾個類似的問題都指向此頁面： https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/OptimizingforSafarioniPhone/OptimizingforSafarioniPhone.html

但我不太確定要從中收集什麼解決方案。

大多數電子郵件客戶端去掉javascript，所以我猜這裏的對象檢測不合適。用戶代理字符串選項似乎更多地針對特定的瀏覽器版本。

有沒有一個簡單的解決方案，我錯過了或有人指向我的文章，可能解決這一特定問題。

感謝

來源

2012-05-21 fivedoor

一些（大部分）的電子郵件服務提供商在改寫的webmail端的HTML/CSS。這意味着，可能會將帶有媒體查詢的CSS解析出來。您可以輕鬆驗證，通過使用常規桌面瀏覽器並檢查郵件的代碼，或設置一些奇特的顏色並檢查它是否顯示。

但是，我不認爲這是一個很大的用例，用戶在他們的webmail上查看/訪問iphone。是嗎？

來源

2012-05-21 12:25:36 biophonc

感謝提示biophonc。就用例而言 - 你可能適合iphone。雖然統計數據表明，這封電子郵件的用戶羣是很高的含義，40多歲，並不一定是技術精通 - 所以很多ipad和iphone用戶，但我不一定會相信他們以最佳方式使用他們的設備！至少在iPad上，我們知道有不少用戶訪問網絡郵件。 – fivedoor

我不知道你的郵件模板的寬度，但它不應該超過600px - 這應該適用於iPad以及常規桌面用戶。這讓你獨自一人，通過Safari瀏覽器查看他們的郵件。 btw：例如，IIRC gmail不支持媒體查詢。 – biophonc

媒體查詢或有條件的CSS針對Safari瀏覽器在iPad/iPhone？

回答

相關問題