不同应用的邮件风格变化

Question

我目前正在使用 nodemailer 向要求在我的网站上更改密码的客户发送电子邮件。但是，样式适用于默认 windows mail 应用程序，但在使用 gmail 时有所不同，在使用移动版 gmail 应用程序时又有所不同。
我的问题是，我如何继续制作一个带有徽标和重置 link 的简单框来处理所有邮件应用程序？

我的代码：

const nodemailer = require('nodemailer');
async function main() {
    let transporter = nodemailer.createTransport({
        host: 'smtp.gmail.com', //gmail smtp server
        port: 587, //gmail port
        secure: false,
        auth: {
            user: require('./misc/auth').email,
            pass: require('./misc/auth').token
        },
    });
    if (req.query.type === 'forgot-password' && data.from) {
        let name = '';
        db.fetchAll().forEach(d => {
            if (d.ID !== 'login') return;
            d = JSON.parse(JSON.stringify(d.data[0]));
            if (d.email === data.from) name = d.fName.toString();
        });
        function makeid(length) {
            let result = '';
            let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
            let charactersLength = characters.length;
            for (let i = 0; i < length; i++ ) {
                result += characters.charAt(Math.floor(Math.random() * charactersLength));
            }
            return result;
        }
        let link = `${req.headers.referer.split(req.headers.host)[0]}${req.headers.host}/reset/${makeid(20)}?token=${makeid(15)}`;
        setTimeout(async function() {
            if (name === '') return res.json({ error: 'Internal Error' });
            await transporter.sendMail({
            from: `${require('./misc/auth').name} <${require('./misc/auth').email}>`,
            to: data.from,
            subject: 'Reset Your Password',
            text: '',
            html:
                `<!DOCTYPE html><html>` +
                `<style>` +
                `a {text-decoration: none; color: black; } .text-center { text-align: center; } .text { font-family: Arial; font-size: 20px; } .title { font-weight: bold; font-size: 12px; } .sub-title { font-weight: bold; font-size: 10px; } .body { display: flex; justify-content: center; margin: auto; } .header { border-radius: 5px; border: 5px solid black; padding: 50px 90px; } button { display: flex; justify-content: center; margin: aut; font-size: 15px; padding: 5px 10px; border-radius: 5px; border-color: black; }` +
                `</style>` +
                `<body>` +
                    `<div class="body">
                        <div class="header">
                            <img class="logo" src="${req.headers.referer.split(req.headers.host)[0]}${req.headers.host}/style/images/logo.webp" width="200px" height="200px">
                            <div class="text title text-center"><h1>Website Name</h1></div>
                            <span class="text">Hi  ${name[0].toUpperCase() + name.substring(1).toLowerCase()},</span><br>
                            <div class="text sub-title text-center"><h1>Forgot your password?</h1></div><br>
                            <a href="${link}">
                                <button>Reset Your Password</button>
                            </a>
                        </div>
                    </div>` +
                `</body></html>`
            });
            res.json({ response: 'Success' });
        }, 100);
    }
}

Answer 1

电子邮件 HTML 必须考虑大量的客户端和浏览器。许多老客户不会正确呈现您的电子邮件，因为他们没有随着网络标准发展。

在当前状态下，您的 HTML 不是响应式构建的，可以从为 outlook 添加响应性、元标记和条件语句中获益。

Here is a good resource to help you adjust your code. Additionally, you can use a framework like MJML 轻松构建有效模板。

不同应用的邮件风格变化

Email style changes in different applications

html

javascript

node.js

nodemailer