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

Question

我一直在使用媒体查询来更改 iphone 和 ipad 用户的电子邮件。 基本上，当使用这两种设备的“邮件”访问电子邮件时，我已经取得了成功，但是当使用 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 上查看/访问他们的网络邮件并不是一个如此大的用例。是吗？