Я разрабатываю html рассылку, которая пока работает очень корректно на всех почтовых клиентах.
На мобильных устройствах она должна растягиваться до 100% ширины, что и происходит до сих пор.
Но:
На почте iphone, когда письмо открывается, на секунду я вижу стопроцентную ширину, а затем добавляется пробел справа. Это всегда один и тот же пробел.
Я попробовал сократить свой код до минимума, чтобы понять, в чем может быть причина. Там я обнаружил, что это могут быть ссылки, это может быть граница. Иногда он снова работает, а иногда нет.
Есть ли какая-то тайна про 100% ширину на iphone в html рассылках, о которой я еще не знал?
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Newsletter</title>
<style type="text/css">
/* Client-specific Styles */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */
body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
body{-webkit-text-size-adjust:none;} /* Prevent Webkit platforms from changing default text sizes. */
/* Reset Styles */
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table td{border-collapse:collapse; margin: 0; padding: 0;}
#backgroundTable{height:100% !important; margin:0; padding:0; width:100% !important;}
body {
background-color: #EEEDEC;
font-family: Arial, sans-serif;
font-size: 15px;
line-height: 1.5em;
font-weight: 100;
text-align: left;
width: 100%;
}
p {
margin-bottom: 20px;
}
a {
color: #C5111A;
font-weight: bold;
}
table {
width: 100%;
text-align: left;
}
img { max-width: 100%; }
table.outter {
width: 100%;
background-color: #fff;
}
table.center {
width: 100%;
background-color: #fff;
}
h2 {
font-family: Arial, sans-serif;
font-size: 15px;
font-weight: 100;
margin-bottom: 20px;
height: 30px;
line-height: 30px;
color: #fff;
padding-left: 10px;
background-color: #C5111A;
background: #C5111A;
background: -webkit-gradient(linear, left top, left bottom, from(#c4171d), to(#d6404c));
background: -webkit-linear-gradient(top, #c4171d, #d6404c);
background: -moz-linear-gradient(top, #c4171d, #d6404c);
background: -ms-linear-gradient(top, #c4171d, #d6404c);
background: -o-linear-gradient(top, #c4171d, #d6404c);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#c4171d,endColorstr=#d6404c);
zoom: 1;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="main">
<tr>
<td align="center" valign="top">
<!-- outter -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="outter">
<tbody>
<!-- BEGINN -->
<!-- BOX -->
<tr>
<td align="center" valign="top">
<!-- center -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="center">
<tbody>
<tr>
<td valign="top" >
<!-- box -->
<table border="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td valign="top">
<h2 class="h2">Heading</h2>
<p>This is a Paragraph</p>
<a href="http://www.google.de">This is a link</a>
</td>
</tr>
</tbody>
</table>
<!-- /box -->
</td>
</tr>
</tbody>
</table>
<!-- /center -->
</td>
</tr>
<!-- END -->
</tbody>
</table>
</td></tr>
</table>
</center>
</body>
</html>
В данном предоставленном коде 100% ширина будет работать только без якоря.