title: Scale html email to fit within in mobile screen without scroll (android / iOS)
body: <p>I'm trying to build a html email that will scale to fit within a mobile screen without the user need to scroll horizontally. I have tried using...</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  </code></pre>
  
  <p>and setting the body width to 100% - but neither seems to work. Any other suggestions?</p>
  
  <p>Here is my full html</p>
  
  <pre><code>&lt;html&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;style type="text/css"&gt;.ExternalClass .ecxReadMsgBody{width:100%;}   .ExternalClass{width:100%;} body{margin: 0; padding: 0;} &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body style="background: #dfdfe0; width:100%;"&gt;
  
      &lt;table align="center" border="0" cellpadding="0" cellspacing="0" style="background: #dfdfe0;color: #37383a;margin: 0px;width: 100%;" width="100%"&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;table border="0" cellpadding="0" cellspacing="0" width="576"&gt;
  
                      &lt;tr&gt;
                          &lt;td colspan="2"&gt;&lt;/td&gt;
                          &lt;td colspan="34" style="background-color: red;" bgcolor="red"&gt;&lt;img width="522" src="header2.png"&gt;&lt;/td&gt;
                          &lt;td colspan="2"&gt;&lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt; &lt;!-- Start of the email grid --&gt;
                          &lt;td width="9"&gt;&lt;/td&gt;
                          &lt;td width="18" height="10" style="background-color: red; height: 10px;" bgcolor="red"&gt;&lt;/td&gt;
                          &lt;td width="27"&gt;&lt;/td&gt; 
                          &lt;td width="9"&gt;&lt;/td&gt;
                          &lt;td width="9"&gt;&lt;/td&gt;
                          &lt;td width="27"&gt;&lt;/td&gt;
                          &lt;td width="9"&gt;&lt;/td&gt;
                          &lt;td width="9"&gt;&lt;/td&gt;
                          &lt;td width="27"&gt;&lt;/td&gt;
                          &lt;td width="9"&gt;&lt;/td&gt;
                          &lt;td width="9"&gt;&lt;/td&gt;
                          &lt;td width="27"&gt;&lt;/td&gt;
                          &lt;td width="9"&gt;&lt;/td&gt;
                          &lt;td width="9"&gt;&lt;/td&gt;
                          &lt;td width="27"&gt;&lt;/td&gt;
                          &lt;td width="9"&gt;&lt;/td&gt;
                          &lt;td width="9"&gt;&lt;/td&gt;
                          &lt;td width="27"&gt;&lt;/td&gt;
                          &lt;td width="9"&gt;&lt;/td&gt;
                          &lt;td width="9"&gt;&lt;/td&gt;
                          &lt;td width="27"&gt;&lt;/td&gt;
                          &lt;td width="9"&gt;&lt;/td&gt;
                          &lt;td width="9"&gt;&lt;/td&gt;
                          &lt;td width="27"&gt;&lt;/td&gt;
                          &lt;td width="9"&gt;&lt;/td&gt;
                          &lt;td width="9"&gt;&lt;/td&gt;
                          &lt;td width="27"&gt;&lt;/td&gt;
                          &lt;td width="9"&gt;&lt;/td&gt;
                          &lt;td width="9"&gt;&lt;/td&gt;
                          &lt;td width="27"&gt;&lt;/td&gt;
                          &lt;td width="9"&gt;&lt;/td&gt;
                          &lt;td width="9"&gt;&lt;/td&gt;
                          &lt;td width="27"&gt;&lt;/td&gt;
                          &lt;td width="9"&gt;&lt;/td&gt;
                          &lt;td width="9"&gt;&lt;/td&gt;
                          &lt;td width="27"&gt;&lt;/td&gt;
                          &lt;td width="18" style="background-color: red;" bgcolor="red"&gt;&lt;/td&gt;
                          &lt;td width="9"&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Many thanks!</p>
  
  <p>EDIT</p>
  
  <p>Please note I also reduced the amount of columns to 5 and I still get the same result</p>