在ipad / iphone上定位safari的媒体查询或条件css？

Question

我一直在使用媒体查询来改变iphone和ipad用户的电子邮件。基本上，当我使用'Mail'访问这些设备时，我已经取得了成功，但是当使用Safari访问任何电子邮件客户端时，电子邮件会响应桌面版本。

这是我正在使用的：

 @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/archive/documentation/AppleApplications/Reference/SafariWebContent/OptimizingforSafarioniPhone/OptimizingforSafarioniPhone.html

但我不太确定从中收集什么解决方案。

大多数电子邮件客户端都会删除javascript，所以我猜这里的对象检测不合适。 “用户代理字符串”选项似乎更多地是针对特定浏览器版本。

有没有一个我错过的简单解决方案，或者有人能指出我可能解决这个特定问题的文章。

Answer 1

一些（大多数）电子邮件提供商在webmail端重写html / css。这意味着，很可能解析出具有媒体查询的css。您可以通过使用常规桌面浏览器并检查邮件代码，或设置一些奇特的颜色并检查它是否显示来轻松验证。

但是，我不认为用户在iphone上查看/访问他们的webmail是一个很大的用例。是吗？