CODEWITHSUNDEEP
htmliphonecssmedia-queriesnewsletter
Fabbio
Fabbio

Reputation: 363

Media queries on iphone mail

I am trying to use media queries for iphone newsletters but I didn't even manage to make a very basic example work. Can someone help me out understanding why the color of the span in the following example is still blue even on iPhone? I tried to remove the meta tag viewport, I even removed the inline style on the span, but still the span never turns green.

<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>

I see there is a very similar topic to this one but it got no answer and my problem is a little bit more basic.

I test this sending as email the HTML opened in IE8

Upvotes: 0

Views: 2346

Answers (1)

Jan
Jan

Reputation: 935

Actually there is quite a lot of documentation available via Apple's developer portal (no need to register). For your specific question this ressource should do the trick:

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

This is also a good entry point to learn more about web apps on iOS ranging from technical stuff to the user interface guidelines

That being said, you should just reorder your CSS so that the @media query is the final part of the CSS (since it needs to overwrite previous CSS definitions, which it can't if they are ordered your way).

Upvotes: 1

Related Questions