Question

我正在尝试使用iphone简报的媒体查询，但我甚至没有设法做一个非常基本的示例工作。有人可以帮助我理解为什么即使在iPhone上，以下示例中的跨度颜色仍然是蓝色的吗？我试图删除元标记视口，我甚至删除了跨度上的内联样式，但是跨度仍然不会变为绿色。

<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

Answer 1

实际上，Apple的开发人员门户网站提供了大量文档（无需注册）。对于您的具体问题，这个资源应该可以解决问题：

https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/OptimizingforSafarioniPhone/OptimizingforSafarioniPhone.html

这也是了解iOS上的网络应用程序的更多切入点，从技术内容到用户界面指南

话虽如此，你应该重新排序你的CSS，以便@media查询是CSS的最后一部分（因为它需要覆盖以前的CSS定义，如果按照你的方式订购它就不能）。 / p>

媒体查询iphone邮件

1 个答案: