html 模板不会以桌面和移动设备为中心,并且会拉伸徽标图像

问题描述 投票:0回答:1

我确信这将是一个超级简单的修复,但我不是一个编码员,所以我无法弄清楚这一点。

我出于营销目的构建了一个 html 电子邮件模板,但我正在处理两个问题:

  1. 电子邮件顶部的徽标在桌面上或在横向移动设备上阅读时会被拉伸。
  2. 电子邮件以移动设备为中心,但在桌面上却偏离中心。一切都被推到了最右边。

这是我正在使用的代码(已编辑敏感信息):

function sendEmails() {
  var sheetName = "test";
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(sheetName);

  if (!sheet) {
    Logger.log("Sheet 'test' not found.");
    return;
  }

  var dataRange = sheet.getDataRange();
  var values = dataRange.getValues();

  for (var i = 1; i < values.length; i++) {
    if (!values[i][0]) {
      continue;
    }

    var email = values[i][0];
    var firstName = values[i][6];
    var category = values[i][8];
    var userFirstName = values[i][13];

    var today = new Date();
    var dayOfWeek = today.getDay();
    var hourOfDay = today.getHours();

    if ((dayOfWeek >= 2 && dayOfWeek <= 4) && (hourOfDay >= 8 && hourOfDay <= 18)) {
      var subject = "**EMAIL SUBJECT**";

      var body = "<html>";
      body += "<head>";
      body += "<style>";
      body += "@media only screen and (max-width: 600px) {";
      body += ".oEQ55c { width: 100% !important; }";
      body += ".zhwgeb { width: auto !important; }";
      body += ".MHCHNe { max-width: 100% !important; }";
      body += ".top-image { width: 100% !important; height: auto !important; max-height: none !important; }";
      body += "}";
      body += "@media only screen and (min-width: 601px) {";
      body += ".desktop-container { max-width: 750px; margin: 0 auto; }";
      body += ".top-image { width: 100% !important; height: auto !important; max-height: none !important; }";
      body += "}";
      body += "</style>";
      body += "</head>";
      body += "<body>";
      body += "<div class='desktop-container'>";
      body += "<table style='background-color:#007b83;padding:0 20px' role='presentation' width='100%' border='0' cellspacing='0' cellpadding='0'>";
      body += "<span style='padding-top:0;font-size:0;line-height:0;color:#007b83;background-color:#007b83;display:none;overflow:hidden;max-height:0'>";
      body += "qd2rcx9dnb83";
      body += "</span>";
      body += "</td>";
      body += "</tr>";
      body += "<tr>";
      body += "<td></td>";
      body += "<td align='center' valign='top' width='600'>";
      body += "<table width='600' border='0' cellspacing='0' cellpadding='0' style='width:100%;max-width:600px;background-color:#007b83' bgcolor='#007b83' role='presentation'>";
      body += "<tbody>";
      body += "<tr>";
      body += "<td>";
      body += "<table width='100%' border='0' cellspacing='0' cellpadding='0' role='presentation'>";
      body += "<tbody>";
      body += "<tr>";
      body += "<td>";
      body += "<table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-collapse:collapse;background:#fff;background-color:#fff;width:100%' bgcolor='#fff' width='100%' class=''>";
      body += "<tbody>";
      body += "<tr>";
      body += "<td style='border-collapse:collapse;direction:ltr;font-size:0;text-align:center' align='center'>";
      body += "<div style='font-size:0;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%'>";
      body += "<table border='0' cellpadding='20' cellspacing='0' role='presentation' style='border-collapse:collapse;background-color:#fff;vertical-align:top' width='100%' bgcolor='#fff' valign='top'>";
      body += "<tbody>";
      body += "<tr>";
       body += "<td align='center' style='border-collapse:collapse;width:100%' class=''>";
      body += "<img src='cid:ii_lpu1iayc2' alt='fef66602f01e7e5581f338b673b532ca.png' style='-ms-interpolation-mode: bicubic; display: block; width: 100%; max-width: 600px; height: auto; max-height: 100px; outline: none; text-decoration: none; margin: 0 auto;' class=''>";
      body += "</td>";
      body += "</tr>";
      body += "</tbody>";
      body += "</table>";
      body += "</div>";
      body += "</td>";
      body += "</tr>";
      body += "</tbody>";
      body += "</table>";
      body += "<table width='100%' border='0' cellspacing='0' cellpadding='0' role='presentation'>";
      body += "<tbody>";
      body += "<tr>";
      body += "<td>";
      body += "<table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-collapse:collapse;background-color:white;width:100%' bgcolor='white' width='100%' class=''>";
      body += "<tbody>";
      body += "<tr>";
      body += "<td style='border-collapse:collapse;direction:ltr;font-size:0;padding-bottom:30px;text-align:center' align='center'>";
      body += "<table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-collapse:collapse;display:inline-table' width='100%' class=''>";
      body += "<tbody>";
      body += "<tr>";
      body += "<td style='border-collapse:collapse;direction:ltr;font-size:0;padding:0;text-align:center' align='center'>";
      body += "<div style='font-size:0;text-align:left;direction:ltr;display:inline-block;vertical-align:middle;width:100%'>";
      body += "<table border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-collapse:collapse;background-color:#fff;vertical-align:top' width='100%' bgcolor='#fff' valign='top'>";
      body += "<tbody>";
      body += "<tr>";
      body += "<td align='center' style='border-collapse:collapse;width:600px' class=''>";
      body += "<img src='cid:ii_lpu1i1t51' alt='buyerlink photo.png' style='-ms-interpolation-mode: bicubic; border: 0; line-height: 100%; outline: none; text-decoration: none; display: block; font-size: 13px; height: auto; width: 100%; max-width: 600px; margin: 0 auto;' class=''>";
      body += "</td>";
      body += "</tr>";
      body += "</tbody>";
      body += "</table>";
      body += "</div>";
      body += "</td>";
      body += "</tr>";
      body += "</tbody>";
      body += "</table>";
      body += "<table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-collapse:collapse;display:inline-table' width='90%' class=''>";
      body += "<tbody>";
      body += "<tr>";
      body += "<td style='border-collapse:collapse;direction:ltr;font-size:0;padding:0;text-align:center' align='center'>";
      body += "<div style='font-size:0;text-align:left;direction:ltr;display:inline-block;vertical-align:middle;width:100%'>";
      body += "<table border='0' cellpadding='0' cellspacing='0' role='presentation' width='100%' style='border-collapse:collapse'>";
      body += "<tbody>";
      body += "<tr>";
      body += "<td style='border-collapse:collapse;vertical-align:middle' valign='middle'>";
      body += "<table border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-collapse:collapse' width='100%'>";
      body += "<tbody>";
      body += "<tr>";
      body += "<td align='center' style='border-collapse:collapse;font-size:0;padding:0 10px;padding-top:20px;word-break:break-word'>";
      body += "<div style='font-family:arial,sans-serif;font-size:24px;letter-spacing:0;line-height:normal;text-align:center;color:#202124' class=''>";
      body += "<span style='font-size:28px'>";
      body += "Take advantage of the holiday season with the best leads!";
      body += "</span>";
      body += "</div>";
      body += "</td>";
      body += "</tr>";
      body += "</tbody>";
      body += "</table>";
      body += "</div>";
      body += "</td>";
      body += "</tr>";
      body += "</tbody>";
      body += "</table>";
      body += "<table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-collapse:collapse;display:inline-table' width='90%' class=''>";
      body += "<tbody>";
      body += "<tr>";
      body += "<td style='border-collapse:collapse;direction:ltr;font-size:0;padding:0;text-align:center' align='center'>";
      body += "<div style='font-size=0;text-align:left;direction:ltr;display:inline-block;vertical-align:middle;width:100%'>";
      body += "<table border='0' cellpadding='0' cellspacing='0' role='presentation' width='100%' style='border-collapse:collapse'>";
      body += "<tbody>";
      body += "<tr>";
      body += "<td style='border-collapse:collapse;vertical-align:middle' valign='middle'>";
      body += "<table border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-collapse:collapse' width='100%'>";
      body += "<tbody>";
      body += "<tr>";
      body += "<td align='center' style='border-collapse:collapse;font-size:0;padding:0 10px;padding-top:18px;word-break:break-word'>";
      body += "<div style='font-family:arial,sans-serif;font-size:14px;font-weight:400;letter-spacing:0;line-height:1.4;text-align:center;color:#5f6368' class=''>";
      body += "Hey " + firstName + ",";
      body += "<br><br>";
      body += "Are you ready for 2024 and this holiday season? ❄️";
      body += "<br><br>";
      body += "My name is " + userFirstName + ", and I wanted to personally reach out to you as an official representative of <b>" + "**MY COMPANY**" + "</b>, the <b><i>" + "fastest growing lead generator in the U.S to date!" + "</i></b>!";
      body += "<br><br>";
      body += "We have been servicing the " + category + " industry for <b>10 years</b> and have provided our clients phenomenal results throughout. I would like to discuss with you how **MY COMPANY** has kept our clients' cost of marketing to <b>10-15%</b> all while <b>boosting closing rates by an average of 33%</b>. Do you have time for a quick 10-minute chat?";
      body += "<br><br>";
      body += "Here is a link to <b><u><font color='#3d85c6'><a href='**MY CALENDLY LINK**'>my calendar</a></font></u></b>. Let's connect! I look forward to meeting you. Stay warm🏂!";
      body += "</div>";
      body += "</td>";
      body += "</tr>";
      body += "</tbody>";
      body += "</table>";
      body += "</div>";
      body += "</td>";
      body += "</tr>";
      body += "</tbody>";
      body += "</table>";
      body += "<table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-collapse:collapse;display:inline-table' width='90%' class=''>";
      body += "<tbody>";
      body += "<tr>";
            body += "<td style='border-collapse:collapse;direction:ltr;font-size:0;padding:0;text-align:center' align='center'>";
      body += "<div style='font-size=0;text-align:left;direction:ltr;display:inline-block;vertical-align:middle;width:100%'>";
      body += "<table border='0' cellpadding='0' cellspacing='0' role='presentation' width='100%' style='border-collapse:collapse'>";
      body += "<tbody>";
      body += "<tr>";
      body += "<td style='border-collapse:collapse;vertical-align:middle' valign='middle'>";
      body += "<table border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-collapse:collapse' width='100%'>";
      body += "<tbody>";
      body += "<tr>";
      body += "<td align='center' style='border-collapse:collapse;font-size:0;padding:0 10px;padding-top:18px;word-break:break-word'>";
      body += "<div style='font-family:arial,sans-serif;font-size:15px;font-weight:400;letter-spacing:0;line-height:1.4;text-align:center;color:#5f6368' class=''>";
      body += "Best Regards,";
      body += "<br><br>";
      body += "<b>Jonathan Borgia</b>";
      body += "<br>";
      body += "Business Development Representative";
      body += "<br>";
      body += "Phone: **MY PHONE NUMBER**";
      body += "<br>";
      body += "<a href='mailto:**MY EMAIL ADDRESS**' style='color:#3d85c6;text-decoration:none' target='_blank'>**MY EMAIL ADDRESS**</a>";
      body += "</div>";
      body += "</td>";
      body += "</tr>";
      body += "</tbody>";
      body += "</table>";
      body += "</div>";
      body += "</td>";
      body += "</tr>";
      body += "</tbody>";
      body += "</table>";
      body += "<table border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-collapse:collapse;display:inline-table' width='100%' class=''>";
      body += "<tbody>";
      body += "<tr>";
      body += "<td style='border-collapse:collapse;direction:ltr;font-size:0;padding:0;text-align:center' align='center'>";
      body += "<div style='font-size:0;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%'>";
      body += "<table border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-collapse:collapse;vertical-align:top' width='100%' valign='top'>";
      body += "<tbody>";
      body += "<tr>";
      body += "<td align='center' style='border-collapse:collapse;font-size:0;padding:0;padding-top:30px;word-break:break-word'>";
      body += "<table border='0' cellpadding='0' cellspacing='0' role='button' style='border-collapse:separate;background:#007b83;border-radius:4px;line-height:100%;padding:8px 24px' class=''>";
      body += "<tbody>";
      body += "<tr>";
      body += "<td align='center' bgcolor='#007b83' role='presentation' style='border-collapse:collapse;background:#007b83;border:none' valign='middle'>";
      body += "<a href='**MY CALENDLY LINK**' style='display:inline-block;background:#007b83;color:#ffffff;font-family:arial,sans-serif;font-size:14px;font-weight:bold;line-height:1.4;letter-spacing:0;margin:0;text-decoration:none;text-transform:none' target='_blank' class=''>";
      body += "<span style='display:block;min-width:10px' class=''>";
      body += "Schedule a call";
      body += "</span>";
      body += "</a>";
      body += "</td>";
      body += "</tr>";
      body += "</tbody>";
      body += "</table>";
      body += "</td>";
      body += "</tr>";
      body += "</tbody>";
      body += "</table>";
      body += "</div>";
      body += "</td>";
      body += "</tr>";
      body += "</tbody>";
      body += "</table>";
      body += "</td>";
      body += "</tr>";
      body += "</tbody>";
      body += "</table>";
      body += "</td>";
      body += "<td>";
      body += "</td>";
      body += "</tr>";
      body += "<tr height='0'>";
      body += "<td colspan='3'>";
      body += "<span style='padding-top:0;font-size:0;line-height:0;display:none;overflow:hidden;max-height:0;color:#fff'>";
      body += "qd2rcx9dnb83";
      body += "</span>";
      body += "</td>";
      body += "</tr>";
      body += "</tbody>";
      body += "</table>";
      body += "</div>";
      body += "</body>";
      body += "</html>";        

      var inlineImages = {};
      inlineImages["ii_lpu1iayc2"] = DriveApp.getFileById("1TGepSmzaq6ddn4xX7Sg45YFFt2_4eSD-").getBlob();
      inlineImages["ii_lpu1i1t51"] = DriveApp.getFileById("1sUkZVlAhfSB320dAodInmXXwPVCZqBHY").getBlob();        

      MailApp.sendEmail({
        to: email,
        subject: subject,
        htmlBody: body,
        inlineImages: inlineImages,
      });
    }
  }
}

我真的不知道如何解释我所尝试的内容,因为我对编码没有深入的理解,但我花了几个小时来调整和修复问题,这是我所做的最后一件事无法修复。我只是希望有一个简单的修复方法可以有人帮忙。

templates gmail html-email
1个回答
0
投票

我不确定它是否会修复它,但你在 2 个地方写了

font-size=0
而不是
font-size:0
,这可能会阻止该行上其余 CSS 的加载,所以尝试替换它?

此外,您可以使用而不是每行上的

body += "CODE"
body += `CODE.... 后面跟着另一个反引号

© www.soinside.com 2019 - 2024. All rights reserved.