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

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

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

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

1 个答案: