0

我正在尝试对 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>

我看到有一个与此非常相似的主题，但没有得到答案，而且我的问题更基本一些。

我测试这个作为电子邮件发送在 IE8 中打开的 HTML

4

1 回答 1

1

实际上，通过 Apple 的开发者门户（无需注册）可以获得很多文档。对于您的特定问题，此资源应该可以解决问题：

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

这也是了解更多有关 iOS 上的 Web 应用程序（从技术资料到用户界面指南）的一个很好的切入点

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

于 2013-06-19T08:07:28.507 回答