这是我的电子邮件模板代码。这在 iPhone 上不起作用。在 iPhone 中，邮件模板扰乱了设计。在安卓手机上看起来不错。我已经搜索了很多关于我的问题的东西。但是，我找不到任何解决方案。您的帮助将不胜感激。谁能帮我？
HTML
<body style="margin: 0;padding: 0;position: relative;min-height: 100vh;background-color: #e7e4ff;">
<div class="mail_temp_section">
<div class="mail_temp_card">
<h2>Welcome to the team!</h2>
<div class="input_field">
<label style="padding: 1.5625VW;">License
<span>8999-879878-45131-3213</span>
</label>
</div>
<p>Activate your account in our <a href="#" style="border-bottom: 0.104vw solid #836dfa;">dashboard</a></p>
<a href="#" class="twitter_link"><img src="https://i.ibb.co/CnNLZmj/twitter.png" alt="twitter" style="vertical-align: sub;
margin-right: 0.2vw; height: 1.25VW; width: 1.25VW;"> Feel free to reach out via Facebook</a>
</div>
</div>
</body>
CSS
body * {
box-sizing: border-box;
font-family: 'Arial Black';
}
.mail_temp_section {
-ms-flex-align: center;
display: flex;
width: 100%;
height: 100vh;
}
.mail_temp_card {
background-image: url(https://i.ibb.co/YZgs2vS/mail-bg.png);
display: table;
margin: auto;
width: 45.6vw;
padding: 6vw;
background-size: cover;
background-repeat: no-repeat;
border-radius: 1.6vw;
text-align: center;
background-position: bottom center;
}
.mail_temp_card h2 {
color: #775cff;
font-size: 2vw;
padding-bottom: 2vw;
margin-top: 50px;
}
.input_field {
background-color: #e3e3f2;
padding: 1.4vw;
border-radius: 1.6vw;
-webkit-box-shadow: 0px -10px 30px -5px rgba(204, 204, 236, 0.65);
-moz-box-shadow: 0px -10px 30px -5px rgba(204, 204, 236, 0.65);
box-shadow: 0px -10px 30px -5px rgba(204, 204, 236, 0.65);
display: table;
margin: auto;
}
.input_field label {
font-size: 1.1vw;
display: block;
width: 100%;
text-align: left;
color: #2e3246;
padding: 30px;
}
.input_field span {
display: block;
background-color: #fff;
padding: 0.3vw 1vw;
color: #2e3246;
font-size: 1.2vw;
margin-top: 0.5vw;
cursor: text;
}
.mail_temp_card p {
font-size: 0.7vw;
padding-top: 4.5vw;
color: #2e3246;
font-family: 'Lato';
}
.mail_temp_card p a {
color: #836dfa;
border-bottom: 0.104vw solid #836dfa;
}
.mail_temp_card>a.twitter_link {
color: #2e3246;
font-size: 0.7vw;
margin-top: 0.7vw;
font-family: 'Lato';
}
a.twitter_link {
margin-bottom: 50px;
}
a.twitter_link img {
width: 24px;
height: 24px;
}
提前致谢...
最佳答案
如果您打算发送电子邮件模板，那么请使用表格，但您自己设计电子邮件模板并不能保证在所有电子邮件客户端中都能正常工作，
Try to get some email boilerplate of email template and tweak it to your needs
下面是一些获取电子邮件样板的链接
https://github.com/leemunroe/responsive-html-email-template
https://github.com/seanpowell/Email-Boilerplate/blob/master/email.html
关于html - 在 iPhone 中，CSS 在电子邮件模板中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59068613/