адаптивная проблема в шаблонах HTML-почты

ProgramBox

адаптивная проблема в шаблонах HTML-почты

Post author:admin
Запись опубликована:5 марта, 2023
Post category:Вопросы по программированию

#html #css #html-email

#HTML #css #html-электронная почта

Вопрос:

Я разрабатываю динамические HTML-шаблоны для отправки электронных писем клиентам. разработанный мной шаблон отлично работает на больших экранах, но на средних и маленьких экранах я сталкиваюсь с одной проблемой дизайна. шаблон должен быть таким

он должен быть окружен светло-серым цветом, а тело — белым цветом. шаблон, который я разработал, тоже такой же, но для мобильных телефонов он выглядит следующим образом

Как вы можете видеть, светло-серый цвет по бокам не виден, поскольку содержимое занимало все пространство. Мне нужно сделать его видимым и для мобильных экранов. Я попытался применить некоторые отступы и уменьшить ширину, но это не работает. Ссылка на JSfiddle не обрабатывается переполнением стека, поэтому оставьте ее в комментариях, пожалуйста, проверьте ее, и любая помощь будет очень признательна. [JSfiddle][3]

 /* Take care of image borders and formatting, client hacks */

img {
  max-width: 600px;
  outline: none;
  text-decoration: none;
  -ms-interpolation-mode: bicubic;
}

a img {
  border: none;
}

table {
  border-collapse: collapse !important;
}

#outlook a {
  padding: 0;
}

.ReadMsgBody {
  width: 100%;
}

.ExternalClass {
  width: 100%;
}

.backgroundTable {
  margin: 0 auto;
  padding: 0;
  width: 100% !important;
}

.branding {
  display: inline-flex;
  align-items: center;
  margin-left: 1%;
}

table td {
  border-collapse: collapse;
}

.ExternalClass * {
  line-height: 115%;
}

.container-for-gmail-android {
  min-width: 600px;
  background-color: white;
}


/* General styling */

* {
  font-family: Helvetica, Arial, sans-serif;
}

body {
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  width: 100% !important;
  margin: 0 !important;
  height: 100%;
  color: #676767;
}

td {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #777777;
  text-align: center;
  line-height: 21px;
}

th {
  padding-top: 12px;
  text-align: left;
  color: white;
}

.report-table {
  border: 3px solid #707070;
  margin-top: 20px;
}

.report-table th {
  background-color: #333333;
}

.border {
  border: 1px solid grey;
}

table {
  border-collapse: collapse;
}


/* table [class ~= "report-table"]{
    border:1px solid#007770;
} */

.marks {
  display: inline-block;
  color: white;
  width: 50px;
  text-align: center;
  background-image: linear-gradient(246deg, #0080FF, #072F9C);
  line-height: 2;
  letter-spacing: 1.6px;
  vertical-align: top;
}

.sub {
  width: 210px;
  display: inline-block;
  max-width: 300px;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 5px;
}

.p-logo {
  width: 50px;
  float: left;
}

.source {
  text-align: left;
}

.white td {
  color: white;
}

.attempted {
  text-align: left;
}

.attempted p {
  /* display: inline-block; */
  margin-right: 10px;
  float: left;
  line-height: 1;
}

.mod-title {
  text-align: left;
  padding-top: 20px;
}

.mod-title,
.attempted {
  padding-left: 15px;
  padding-right: 15px;
}

.img {
  float: right;
  margin-right: 0px;
  margin-top: -70px;
  margin-bottom: -70px;
  width: 152px;
}

.report-table td,
.report-table th {
  border: 1px solid gainsboro;
  padding: 5px;
  text-align: center;
}

.report-table tr:nth-child(even) {
  background-color: #f2f2f2;
}


/* .report-table  tr:hover {background-color: #ddd;} */

.week {
  background-color: gainsboro;
  display: inline-block;
  padding: 5px;
  border-radius: 10px;
  /* font-size: 20px; */
  margin-bottom: 10px;
}

.weekdays {
  color: #0080FF;
  background-color: gainsboro;
  border: 1px solid white !important;
}

.report-scores {
  color: white;
}

.header-lg,
.header-md,
.header-sm {
  /* font-size: 32px; */
  font-size: 1.5em;
  font-weight: 700;
  line-height: normal;
  padding: 35px 0 0;
  color: #4d4d4d;
}

.sub-head {
  font-size: 1.5em;
  line-height: 2;
  padding-bottom: 30px;
  letter-spacing: 0.6px;
  padding-top: 20px;
}

.header-summary td {
  padding-top: 10px;
  font-size: 1.6em;
  letter-spacing: 1.6px;
  padding-bottom: 20px;
  font-weight: 600;
}

.header-md {
  font-size: 24px;
}

.header-sm {
  padding: 5px 0;
  font-size: 18px;
  line-height: 1.3;
}

.mobile-header-padding-right {
  width: 290px;
  text-align: right;
  padding-left: 10px;
}

.mobile-header-padding-left {
  width: 290px;
  text-align: left;
  padding-left: 10px;
}

.force-width-gmail {
  min-width: 600px;
  height: 0px !important;
  line-height: 1px !important;
  font-size: 1px !important;
}

</style><style type="text/css" media="screen">@import url(http://fonts.googleapis.com/css?family=Oxygen:400,700);
</style><style type="text/css" media="screen">@media screen {
  /* Thanks Outlook 2013! */
  * {
    font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;
  }
}

</style><style type="text/css" media="only screen and (max-width: 480px)">
/* Mobile styles */

@media only screen and (max-width: 480px) {
  .mobile-font-xl {
    font-size: 30px;
  }
  .mobile-font-lg {
    font-size: 28px;
  }
  .mobile-font-sm {
    font-size: 24px;
  }
  .mobile-font-md {
    font-size: 26px;
  }
  .img {
    display: none;
  }
  table[class*="container-for-gmail-android"] {
    min-width: 290px !important;
    width: 100% !important;
  }
  table[class="w320"] {
    width: 320px !important;
  }
  td[class="bottom_description"] {
    font-size: 18px;
  }
  img[class="force-width-gmail"] {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  td[class*="mobile-header-padding-left"] {
    width: 160px !important;
    padding-left: 0 !important;
  }
  td[class*="mobile-header-padding-right"] {
    width: 160px !important;
    padding-right: 10px !important;
    font-size: 18px !important;
  }
  td[class="info-block"] {
    display: block !important;
    width: 280px !important;
    padding-bottom: 40px !important;
  }
  td[class="info-img"],
  img[class="info-img"] {
    width: 278px !important;
  }
  .week {
    font-size: 20px;
  }
  .report-table,
  .report-table td {
    font-size: 18px;
  }
}

</style><style type="text/css" @media="only screen and (min-width:481px) and (max-width:768px)">@media only screen and (min-width:481px) and (max-width:768px) {
  td[class="bottom_description"] {
    font-size: 18px;
  }
  td[class*="mobile-header-padding-right"] {
    padding-right: 10px !important;
  }
}

 <!DOCTYPE html>
<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" />

  <title>Xamplay - Courses Activated</title>

</head>

<body style="background-color:#f0f0f0;">
  <table align="center" cellpadding="0" cellspacing="0" width="770" class="w320">
    <tr>
      <td width="100%" style="text-align: left;">
        <div class="branding">
          <img class="p-logo" src="https://xamplay.com/assets/xamplay-logo.png">
          <h1 class="source">Xamplay</h1>
        </div>
      </td>
    </tr>
  </table>
  <table align="center" cellpadding="0" cellspacing="0" class="container-for-gmail-android w320" width="600">
    <tr>
      <td align="center" valign="top" width="100%">
        <center>
          <table cellspacing="0" cellpadding="0" width="600" class="w320">
            <tr>
              <td class="header-lg mobile-font-xl" style="color:#4d4d4d;padding-top:40px;">
                Hey {{ givenName }}

              </td>
            </tr>
            <tr>
              <td style="color:#4d4d4d" class="sub-head mobile-font-lg">
                Here's your Weekly Performance Report.
                <br> {{ courseName }}
              </td>
            </tr>

            <tr>
              <td align="left" valign="top" width="100%">
                <center>
                  <table style="margin-bottom:30px; " width="600" class="w320 coverage-box">

                    <tr style="color:#4d4d4d">
                      <td class="mobile-font-md">Modules Studied</td>
                      <td class="mobile-font-md">Quiz Attempts</td>
                      <td class="mobile-font-md">Test Attempts</td>
                    </tr>
                    <tr class="header-summary" style="color:#4d4d4d">
                      <td>{{ totalModCount }}</td>
                      <td>{{ totalQuizCount }}</td>
                      <td>{{ totalTestCount }}</td>
                    </tr>

                  </table>
                </center>
              </td>
            </tr>

          </table>
        </center>
      </td>
    </tr>
    <tr>
      <td align="left" valign="top" width="100%" class="content-padding">
        <center>

          <table align="center" cellspacing="10" cellpadding="0" width="600" class="w320 coverage-box">

            <tr>
              <td style="text-align: center;-webkit-text-align:center;padding:20px;" class="mobile-font-lg">
                <b>startDate - endDate</b></td>
            </tr>
            <tr>
              <td class="header-lg mobile-font-md" style="padding-bottom: 30px;padding-top: 20px;">
                How much have you covered :
              </td>
            </tr>


            <tr>
              <td align="left" valign="top" width="100%">
                <center>
                  <table style="margin-bottom:10px; " width="600" class="w320 coverage-box">

                    <!-- display this row for odd indexes -->
                    {{#each progress}} {{#if index%2==1}}
                    <tr style="display:inline-block;margin-bottom:20px">
                      <td style="text-align:left;">
                        <span class="sub mobile-font-md">
                                                        NATA
                                                    </span>
                        <span class="marks mobile-font-sm">94%</span>
                      </td>
                    </tr>
                    {{/if}}

                    <!-- display this row for even indexes -->
                    {{#if index%2==0}}
                    <tr style="float:right;width: 48%;margin-bottom:20px;">
                      <td style="text-align:left;">
                        <span class="sub mobile-font-md">
                                                        NIFT
                                                    </span>
                        <span class="marks mobile-font-sm">100%</span>
                      </td>
                    </tr>
                    {{/if}} {{/each}}



                  </table>
                </center>
              </td>
            </tr>

            <tr>
              <td align="center" valign="top" width="100%" style="background-color: #f7f7f7; height: 100px;" class="content-padding">
                <center>
                  <table cellspacing="0" cellpadding="0" width="600" class="w320 report-table">

                    <tr>
                      <th>

                        <p class="mobile-font-sm">Activity</p>

                      </th>
                      <th>

                        <p class="mobile-font-sm">Study Modules</p>

                      </th>
                      <th>

                        <p class="mobile-font-sm">Quizzes</p>


                      </th>

                      <th>

                        <p class="mobile-font-sm">Tests</p>

                      </th>


                      <th>

                        <p class="mobile-font-sm">Daily Quizes</p>

                      </th>



                    </tr>

                    <tr>
                      <td class="weekdays">
                        <p class="mobile-font-sm">Mon</p>
                      </td>
                      <td>
                        <p class="mobile-font-sm">{{activities.mon.mod_count}}</p>
                      </td>
                      <td>
                        <p class="mobile-font-sm">{{activities.mon.quiz_count}}</p>

                      </td>
                      <td>
                        <p class="mobile-font-sm">{{activities.mon.test_count}}</p>
                      </td>
                      <td>
                        {{#each activities.mon.dqs}}
                        <p class="mobile-font-sm">{{score}}</p>
                        {{/each}}
                      </td>



                    </tr>



                    <tr class="mobile-font-sm">
                      <td class="weekdays mobile-font-sm">
                        <p class="mobile-font-sm">Tue</p>
                      </td>
                      <td>
                        <p class="mobile-font-sm">{{activities.tue.mod_count}}</p>
                      </td>
                      <td>
                        <p class="mobile-font-sm">{{activities.tue.quiz_count}}</p>

                      </td>
                      <td>
                        <p class="mobile-font-sm">{{activities.tue.test_count}}</p>
                      </td>
                      <td>
                        {{#each activities.tue.dqs}}
                        <p class="mobile-font-sm">{{score}}</p>
                        {{/each}}
                      </td>
                    </tr>
                    <tr class="mobile-font-sm">
                      <td class="weekdays">
                        <p class="mobile-font-sm">Wed</p>
                      </td>
                      <td>
                        <p class="mobile-font-sm">{{activities.wed.mod_count}}</p>
                      </td>
                      <td>
                        <p class="mobile-font-sm">{{activities.wed.quiz_count}}</p>

                      </td>
                      <td>
                        <p class="mobile-font-sm">{{activities.wed.test_count}}</p>
                      </td>
                      <td>
                        {{#each activities.wed.dqs}}
                        <p class="mobile-font-sm">{{score}}</p>
                        {{/each}}
                      </td>
                    </tr>
                    <tr>
                      <td class="weekdays">
                        <p class="mobile-font-sm">Thurs</p>
                      </td>
                      <td>
                        <p class="mobile-font-sm">{{activities.thu.mod_count}}</p>
                      </td>
                      <td>
                        <p class="mobile-font-sm">{{activities.thu.quiz_count}}</p>

                      </td>
                      <td>
                        <p class="mobile-font-sm">{{activities.thu.test_count}}</p>
                      </td>
                      <td>
                        {{#each activities.thu.dqs}}
                        <p class="mobile-font-sm">{{score}}</p>
                        {{/each}}
                      </td>
                    </tr>
                    <tr>
                      <td class="weekdays">
                        <p class="mobile-font-sm">Fri</p>
                      </td>
                      <td>
                        <p class="mobile-font-sm">{{activities.fri.mod_count}}</p>
                      </td>
                      <td>
                        <p class="mobile-font-sm">{{activities.fri.quiz_count}}</p>

                      </td>
                      <td>
                        <p class="mobile-font-sm">{{activities.fri.test_count}}</p>
                      </td>
                      <td>
                        {{#each activities.fri.dqs}}
                        <p class="mobile-font-sm">{{score}}</p>
                        {{/each}}
                      </td>

                    </tr>
                    <tr>
                      <td class="weekdays">
                        <p class="mobile-font-sm">Sat</p>
                      </td>
                      <td>
                        <p class="mobile-font-sm">{{activities.sat.mod_count}}</p>
                      </td>
                      <td>
                        <p class="mobile-font-sm">{{activities.sat.quiz_count}}</p>

                      </td>
                      <td>
                        <p class="mobile-font-sm">{{activities.sat.test_count}}</p>
                      </td>
                      <td>
                        {{#each activities.sat.dqs}}
                        <p class="mobile-font-sm">{{score}}</p>
                        {{/each}}
                      </td>
                    </tr>
                    <tr>
                      <td class="weekdays">
                        <p class="mobile-font-sm">Sun</p>
                      </td>
                      <td>
                        <p class="mobile-font-sm">{{activities.sun.mod_count}}</p>
                      </td>
                      <td>
                        <p class="mobile-font-sm">{{activities.sun.quiz_count}}</p>

                      </td>
                      <td>
                        <p class="mobile-font-sm">{{activities.sun.test_count}}</p>
                      </td>
                      <td>
                        {{#each activities.sun.dqs}}
                        <p class="mobile-font-sm">{{score}}</p>
                        {{/each}}
                      </td>
                    </tr>



                  </table>
                </center>
              </td>
            </tr>



            <tr>
              <td align="left" valign="top" width="100%">
                <center>
                  <table cellspacing="0" cellpadding="0" width="600" class="w320 " align="left">

                    <tr>
                      <td class="mod-title mobile-font-lg">
                        <p><b>Modules Studied</b></p>

                      </td>
                    </tr>
                    <tr>
                      <td class="attempted mobile-font-md">
                        {{#each activities.mon.modules}} {{_module.name}} {{/each}} {{#each activities.tue.modules}} {{_module.name}} {{/each}} {{#each activities.wed.modules}} {{_module.name}} {{/each}} {{#each activities.thu.modules}} {{_module.name}} {{/each}} {{#each activities.fri.modules}}
                        {{_module.name}} {{/each}} {{#each activities.sat.modules}} {{_module.name}} {{/each}} {{#each activities.sun.modules}} {{_module.name}} {{/each}}
                      </td>
                    </tr>


                    <tr>
                      <td class="mod-title mobile-font-lg">
                        <p><b>Quiz Attempted</b></p>

                      </td>
                    </tr>
                    <tr>
                      <td class="attempted mobile-font-md">
                        {{#each activities.mon.quizzes}} {{quiz.name}} {{/each}} {{#each activities.tue.quizzes}} {{quiz.name}} {{/each}} {{#each activities.wed.quizzes}} {{quiz.name}} {{/each}} {{#each activities.thu.quizzes}} {{quiz.name}} {{/each}} {{#each activities.fri.quizzes}}
                        {{quiz.name}} {{/each}} {{#each activities.sat.quizzes}} {{quiz.name}} {{/each}} {{#each activities.sun.quizzes}} {{quiz.name}} {{/each}}
                      </td>
                    </tr>
                    <tr>
                      <td class="mod-title mobile-font-lg">
                        <p><b>Test Attempted</b></p>


                      </td>
                    </tr>
                    <tr>
                      <td class="attempted mobile-font-md">
                        {{#each activities.mon.tests}} {{test.name}} {{/each}} {{#each activities.tue.tests}} {{test.name}} {{/each}} {{#each activities.wed.tests}} {{test.name}} {{/each}} {{#each activities.thu.tests}} {{test.name}} {{/each}} {{#each activities.fri.tests}}
                        {{test.name}} {{/each}} {{#each activities.sat.tests}} {{test.name}} {{/each}} {{#each activities.sun.tests}} {{test.name}} {{/each}}
                      </td>
                    </tr>

                  </table>

                </center>

              </td>
            </tr>

            <tr>
              <td style="padding: 25px 0 25px">
                <p style="color:#6E6E6E;opacity: 0.8;" class="mobile-font-xl">Powered by Xamplay Edutech Pvt Ltd.
                </p>
              </td>
            </tr>
          </table>
        </center>
      </td>
    </tr>
  </table>
</body>

</html>

1. Пожалуйста, предоставьте минимальный код, который вы используете

2. Ссылка на JSfiddle: jsfiddle.net/wtb1oL3y @Юстинас

3. Различные почтовые клиенты будут делать это, чтобы гарантировать, что все содержимое может поместиться. Некоторые этого не делают, а просто уменьшают размер определенных элементов. Некоторые используют комбинацию. Поскольку у вас огромная таблица, это может быть невозможно, если вы не попробуете другой макет для своих таблиц, который не требует такой большой ширины.

Ответ №1:

Я проверил ваш код и должен сказать, что ваш код не будет отображаться должным образом на большинстве устройств и почтовых приложений. использовались некоторые «div» и «псевдоклассы», и я думаю, вам нужно пересмотреть свой дизайн, чтобы избежать использования таких элементов и синтаксисов. Кроме того, пожалуйста, сделайте все ваши стили встроенными, тогда они не будут пропущены почтовыми серверами и почтовыми приложениями. Вы можете использовать следующую ссылку для проверки / предварительного просмотра вашего шаблона электронной почты. Средство проверки HTML-кода электронной почты

Но для вашего основного вопроса я должен сказать, что создание адаптивных таблиц немного сложно и создает проблемы с пользовательским интерфейсом для клиента, поэтому я считаю, что у вас могут быть следующие варианты либо для обеспечения доступности, либо для взаимодействия с клиентами:

1. Переосмыслите дизайн и создайте дизайн, основанный на принципах клиентоориентированности, например, если ваши клиенты, вероятно, используют свои телефоны для проверки своей электронной почты (наиболее вероятный вариант), поэтому вам нужно учитывать, что прокрутка таблицы или переход по таблице на маленьком экране — это не очень хороший опыт, поэтомувам нужно сделать дизайн каким-то образом горизонтальным или сгруппированным в блоке не в табличном стиле.

2- Поместите кнопку призыва к действию, которая открывает сгенерированную пользователем ссылку, не требующую входа пользователя, и показывает детали с более интерактивными функциями, такими как складные аккордеоны, с мощью полностью поддерживаемых движков CSS и JS.

3- Сгенерированный PDF-файл и прикрепите его к электронной почте для пользователей. (большинству пользователей это не нравится, потому что его нужно будет загружать и выделять место на пользовательских устройствах, возможно, для его открытия потребуются некоторые приложения и так далее. )

Вопрос:

Комментарии:

Ответ №1:

Вам также может понравиться

Photoswipe с выровненной галереей

Асинхронные сокеты Java NIO становятся чрезвычайно медленными после нескольких сотен подключений

не удалось найти libvirtd.service