2

Столкнулся с проблемой отображения email template в приложении для Iphone "Mail". Гугл отлично взаимодействует с шаблоном и открывает его на полную страницу смартфона, но как только заходишь в программу Mail, шаблон отказывается отображаться на полную страницу.

Есть ли решение данной проблемы?

введите сюда описание изображения

<!DOCTYPE html> {{define "invite"}}
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<body style="margin:0 auto; padding:0;text-align: center!important;">
  <div class="content block">
    <div id="cr" class="content" style="margin-bottom: 40px; margin-top: 2px;width: 589px; color:#FFFFFF; margin:0 auto;">
      <div style="padding-top: 5px;padding-bottom: 5px;">
        <img src="{{.MailAssets}}/m_logo.png" width="150" height="56" style="padding-right: 430px;padding-top: 15px;">
      </div>
      <div class="main_content" style="background-color: #004986;
            padding:0 auto;border-radius: 20px 20px 20px 20px">
        <div class="text">
          <table width="589" cellpadding="20px" cellspacing="0px" style="font-family: Lato, sans-serif; font-size: 18px; text-align: left;">
            <tr>
              <td style="padding: 0px !important;">
                <div style="height: 202px; width: 589px; overflow: hidden;">
                  <img src="{{.CustomData.STORAGE_url}}/public/companies/covers/{{.CustomData.Coid}}.jpg?token={{.LinksToken}}" alt="" style="height: 202px;width: 589px;cursor: default;border-radius: 20px 20px 0px 0px;">
                </div>
              </td>
            </tr>
            <tr>
              <!--<td style="padding-left: 15px;color:#FFFFFF;margin-left: 15px;margin-right: 15px" >-->
              <!--<img src="{{.CustomData.STORAGE_url}}/public/companies/logos/{{.CustomData.Coid}}.jpg?token=lg{{.LinksToken}}" alt=""  width="128px" style="margin: auto;display: inherit;">-->
              <!--</td>-->
              <td>
                <br>
                <img src="{{.MailAssets}}/rich-coll.jpg" alt="" width="308" height="34" style="display: block;margin: 0 auto;">
                <p style="font-size: 17px;font-family: Lato, sans-serif;font-weight: lighter;color:white;padding-left: 10px;padding-right: 10px;padding-top: 20px;text-align: center">
                  Ciao <b>{{.CustomData.Nome}}</b>,<br> Sei invitato da <b>{{.CustomData.Company_name}}</b> a sostenere un'intervista in differita <br> attraverso l'app per la posizione di <br> <b>{{.CustomData.C_Title}}</b><br>
                </p>
                <br><br>
              </td>
            </tr>
            <tr>
              <td style="background: #003160;margin: 10px 8px 50px 10px;">
                <p style="color: white;font-family: Lato, sans-serif;font-weight: 100;text-align: center;font-size: 16px;">L’intervista in differita può essere fatta <b>solo dal telefono</b><br/> apri questa email dal tuo smartphone e clicca sul link<br/> per fare il colloquio.
                </p>
                <a clicktracking=off href="{{.CustomData.UniversalLink}}">
                  <button style="cursor: pointer; display: inline-block; -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;color:#FFFFFF;text-align: center;border: 0px solid;
                            background: rgb(1, 128, 211);padding: 5px 25px;width: 500px;height: 60px;margin-left: 25px;outline: none;font-size: 30px;font-family: Lato, sans-serif;-webkit-user-select: none;">CANDIDATI
                                </button>
                </a>
              </td>
            </tr>
          </table>

          <table width="589" cellpadding="20px" cellspacing="0px" style="font-family: Lato, sans-serif; font-size: 18px; text-align: left;">
            <tr style="margin: 10px 8px 50px 10px;padding-top: 40px;height: 150px;">
              <td>
                <img id="imgiphone" src="{{.MailAssets}}/helloisa.png" alt="" width="85" height="85" style="position: relative;left: 80px;">
              </td>
              <td style="width: 38%;">
                <p name="myname" style="line-height: 1.4;color: white;font-family: Lato, sans-serif;font-weight: 100;text-align: left;font-size: 15px;pointer-events: none;cursor: default;">
                  <b>Customer Support</b><br/>eloisa<span>@</span><span>gmail.</span>it<br/> +39 <span>555 </span>588122</p>
                </p>
              </td>
              <td>
                <a style="line-height: 1.8;color: white;font-family: Lato, sans-serif;font-weight: 100;text-align: left;font-size: 14px;">
                  <b>Eloisa T.</b><br/> <img src="{{.MailAssets}}/firma.png" alt="" width="84" height="37"></a>
              </td>
            </tr>
          </table>
          <hr/>
          <table width="589" cellpadding="20px" cellspacing="0px" style="font-family: Lato, sans-serif; font-size: 18px; text-align: left;">
            <tr>
              <td>
                <p>{{.CustomData.AccessData}}</p>
              </td>
              </td>
            </tr>
          </table>

        </div>
      </div>

      <p style="color: #999999;font-size: 13px;display: inline;">You received this email because you are subscribed.<br></p>
      <a style="color: #999999;font-size: 13px;" clicktracking=off href="{{.UnsubscribeURL}}?email={{.Email}}"> Unsubscribe
            from all future emails</a>
    </div>
  </div>
</body>

</html>

{{end}}

2 ответа 2

0

Проблема решилась добавлением min-width: 640px; в тег body

P.S. в Андройд клиенте Gmail наблюдаются проблемы

0

В данной верстке присутствуют div-элементы. С ними некорректно могут работать почтовые программы. Проверенное решение: использовать только таблицы для верстки.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.