0
Я работаю над электронным письмом с двумя строками из трех изображений. Он хорошо работает во всех почтовых клиентах, пока я не доберусь до iPhone5, 6 и 6, где в iPhone5 первые два изображения, похоже, еще больше сжаты, чем последнее изображение. Создание белой линии между первой и второй строками (см. Прикрепленное изображение). В iPhone6 и 6s это только первое изображение, вызывающее эту проблему. Вот и код. Я попытался поместить все изображения в отдельные таблицы, добавить ширину в отдельные таблицы, TD и теги изображений, я даже превратил PX в процент и ничего не работает. У кого-нибудь есть идея?Проблема с масштабированием изображения iPhone5 и 6
Приветствия
<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="ffffff" class="100plr">
<tr>
<td width="11" class="hide"></td>
<td valign="top" align="center">
<table width="579" border="0" cellpadding="0" cellspacing="0" class="100p">
<tr>
<td valign="top" align="center">
<!-- Row one-->
<table width="579" border="0" cellpadding="0" cellspacing="0" class="100p">
<tr>
<td valign="top" align="center">
<a href="##" target="_blank" style="text-decoration:none;"><img src="http://uploadlibrary.com/emosaic/martin/kuoni/html/images/img388x344.jpg" alt="" border="0" style="display:block;" class="100p" /></a>
</td>
<td valign="top" align="center">
<a href="##" target="_blank" style="text-decoration:none;"><img src="http://uploadlibrary.com/emosaic/martin/kuoni/html/images/img388x344.jpg" alt="" border="0" style="display:block;" class="100p" /></a>
</td>
<td valign="top" align="center">
<a href="##" target="_blank" style="text-decoration:none;"><img src="http://uploadlibrary.com/emosaic/martin/kuoni/html/images/img388x344.jpg" alt="" border="0" style="display:block;" class="100p"/></a>
</td>
</tr>
</table>
<!-- End of Row one-->
<!-- Row two-->
<table width="579" border="0" cellpadding="0" cellspacing="0" class="100p">
<tr>
<td valign="top" align="center">
<a href="##" target="_blank" style="text-decoration:none;"><img src="http://uploadlibrary.com/emosaic/martin/kuoni/html/images/img388x344.jpg" alt="" border="0" style="display:block;" class="100p" /></a>
</td>
<td valign="top" align="center">
<a href="##" target="_blank" style="text-decoration:none;"><img src="http://uploadlibrary.com/emosaic/martin/kuoni/html/images/img388x344.jpg" alt="" border="0" style="display:block;" class="100p" /></a>
</td>
<td valign="top" align="center">
<a href="##" target="_blank" style="text-decoration:none;"><img src="http://uploadlibrary.com/emosaic/martin/kuoni/html/images/img388x344.jpg" alt="" border="0" style="display:block;" class="100p" /></a>
</td>
</tr>
</table>
<!-- End of Row two-->
</td>
</tr>
</table>
</td>
<td width="10" class="hide"></td>
</tr>
</table>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>email template</title>
<style>
@import url(http://fonts.googleapis.com/css?family=Roboto:300); /*Calling our web font*/
/* Some resets and issue fixes */
#outlook a { padding:0; }
body{ width:100% !important; -webkit-text; size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; }
.ReadMsgBody { width: 100%; }
.ExternalClass {width:100%;}
.backgroundTable {margin:0 auto; padding:0; width:100%;!important;}
table td {border-collapse: collapse;}
.ExternalClass * {line-height: 115%;}
a:visited{color:#dddbdc;text-decoration:none;}
/* div, p, a, li, td { -webkit-text-size-adjust:none; }*/
/* End reset */
@media screen and (max-width: 630px){
*[class="mobile-column"] {display: block;}
*[class="mob-column"] {float: none !important;width: 100% !important;}
*[class="hide"] {display:none !important;}
*[class="100p"] {width:100% !important; height:auto !important;}
*[class="condensed"] {display: block;}
*[class="center"] {text-align:center !important; width:100% !important; height:auto !important;}
*[class="100pad"] {width:100% !important; padding:20px;}
*[class="100padleftright"] {width:100% !important; padding:0 20px 0 20px;}
*[class="100padtopbottom"] {width:100% !important; padding:20px 0px 20px 0px;}
*[class="padleft50p"] {text-align:left !important;}
*[class="100grad"] {width:100% !important; height:1px !important;}
*[class="cwNumbs"] {font-size:40px !important;}
}
@media screen and (max-width: 414px) {
*[class="100p"] {width: 100% !important; height:auto !important;}
*[class="100pm"] {width: 100% !important; height:auto !important;}
*[class="100plr"] {width: 100% !important; height:auto !important; padding: 0 20px 0 20px;}
*[class="100prl"] {width: 100% !important; height:auto !important; padding: 0 20px 0 20px;}
*[class="100plrn"] {width: 100% !important; height:auto !important; padding: 0 70px 0 70px;}
*[class="100pr"] {width: 100% !important; height:auto !important; padding: 0 30px 0 0;}
*[class="100pt"] {width: 100% !important; height:auto !important; padding: 10px 0 0 0;}
*[class="100pb"] {width: 100% !important; height:auto !important; padding: 0 0 20px 0;}
*[class="100pbn"] {width: 100% !important; height:auto !important; padding: 0 0 30px 0;}
*[class="100pad"] {width: 100% !important; height:auto !important; padding: 20px 20px 20px 20px;}
*[class="hide"] {display:none !important;}
*[class="center"] {text-align:center !important;}
*[class="mobile"] {width: 100% !important; height:auto !important; display:block !important; max-height:none !important;}
*[class="heading1"] {font-size: 29px !important;}
*[class="heading2"] {font-size: 26px !important;}
*[class="heading3"] {font-size: 15px !important;}
*[class="heading4"] {font-size: 17px !important;}
*[class="apptext"] {font-size: 15px !important;}
*[class="text"] {font-size: 20px !important;}
}
@media screen and (max-width: 373px) {
*[class="heading1"] {font-size: 24px !important;}
*[class="heading2"] {font-size: 22px !important;}
*[class="heading3"] {font-size: 15px !important;}
*[class="heading4"] {font-size: 15px !important;}
*[class="apptext"] {font-size: 13px !important;}
}
</style>
</head>
Это более полезно, чтобы вставить код в вопрос. Использование скриншота очень затрудняет редактирование и проверку изменений кода. Вы также можете включить скриншот проблемы в вопросе, чтобы люди с большей вероятностью увидели это. –
О, привет, чувак, извините im new здесь. вот код. – Martin
Это прекрасно :) Спасибо. Как выглядит класс '.100p'? Или, если бы вы могли поделиться своей таблицей стилей, это было бы здорово. –