title: @media queries being ignored for iphone
body: <p>For some reason, my media query is not applying when I send my email. I'm sending it from Outlook 2007 to a gmail and viewing it using an iphone 4s. I've tried sending test emails with simpler @media query rules (i.e. a media query that just changes the font color) but those don't work either. Also, I've tried sending demo html emails from tutorials (such as this one: <a href="http://www.netmagazine.com/tutorials/build-responsive-emails" rel="nofollow">http://www.netmagazine.com/tutorials/build-responsive-emails</a>) but the media queries are also being ignored there</p>
  
  <p>I've attached the beginning of my code below:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org    /TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/&gt;
  &lt;title&gt;Sample&lt;/title&gt;
  &lt;style type="text/css"&gt;
      @media only screen and (max-width: 480px) { 
          table[class="contenttable"] { 
              width:400px !important;
              text-align: left !important;
          }
  
          table[class="contenttable2"] { 
              width: 382px !important;
              text-align: left !important;
          }
  
          td[class="changer"] { 
              width:382px !important;
              height: 10px !important;
          }
  
          td[class="autoalign"] {
              padding: 0 !important;
              text-align: center !important;
          }
  
          img[class="logo"]  {
              margin-left: -10px !important;
          }
  
          td[class="autotext"] {
              font-size: 14px !important;
              text-align:left !important;
              height: 70px !important;
          }
  
          td[class="textresize"] {
              font-size: 8px !important;
          }
  
          img[class="imgHide"] {
              display:none !important;
              height:0 !important;
              width:0 !important;     
          }
      }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body style="padding:0; margin:0; webkit-text-size-adjust:none;-ms-text-size-adjust: 100%;"&gt; 
  &lt;table width="600" border="0" cellpadding="0" cellspacing="0" class="contenttable" align="center" style="font-family: Arial;"&gt;
  </code></pre>
  
  <p>I'm at a complete loss what the problem is. Any help would be greatly appreciated.</p>