我正在尝试对 iphone 新闻通讯使用媒体查询，但我什至没有设法使一个非常基本的示例起作用。有人能帮我理解为什么即使在 iPhone 上，以下示例中的跨度颜色仍然是蓝色吗？我尝试删除元标记视口(viewport)，甚至删除了跨度上的内联样式，但跨度仍然没有变绿。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style type="text/css">
.test{
color: #FF0000;
}
@media only screen and (max-device-width: 480px) {
.test{
color: #00FF00 !important;
}
}
</style>
</head>
<body>
<table class="w600 l-content-table" border="0" cellpadding="0" cellspacing="0" width="600" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; margin: 0px; padding: 0px; border: 0px;">
<tbody style="margin: 0px; padding: 0px; border: 0px;">
<tr>
<td class="w600" height="55" width="600" style="color: #6f6f6f; border: #6f6f6f;">
<span class='test' style='color: #0000FF'>Test</span>
</td>
</tr>
</tbody>
</table>
</body>
</html>
我看到有一个 very similar topic到这个，但没有得到答案，我的问题更基本一些。
我测试了在 IE8 中打开的 HTML 作为电子邮件发送
最佳答案
实际上，可以通过 Apple 的开发人员门户网站(无需注册)获得大量文档。对于您的具体问题，此资源应该可以解决问题:
这也是一个很好的切入点，可以了解更多关于 iOS 上的网络应用程序，从技术内容到用户界面指南
也就是说，您应该重新排序您的 CSS，以便 @media 查询成为 CSS 的最后一部分(因为它需要覆盖以前的 CSS 定义，如果它们按您的方式排序则不能)。
关于html - iphone 邮件上的媒体查询，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17184668/