媒体查询未在Apple Mail上生效
我使用此
@media screen and (max-width: 375px) {
*[class="padding"] td, .padding td {
padding: 24px !important;
}
*[class="mobile_scale"], .mobile_scale {
width:100% !important;
max-width: 100% !important;
min-width: 100% !important;
}
*[class="shorten_space"], .shorten_space {
height: 16px !important;
line-height: 16px !important;
}
*[class="mobile_scale"] img, .mobile_scale img {
width:100% !important;
height: auto;
}
*[class="mobile_center"], .mobile_center {
align-items: center !important;
text-align: center !important;
margin: 0 auto !important;
}
*[class="sub_button"], .sub_button {
align-items: left !important;
text-align: left;
padding-top: 16px;
}
}
I created a responsive html email using the media queries method mentioned in this article. It works perfectly on outlook mobile app and its mentioned that it should work on iOS mail but it doesn't, any ideas how to fix that? This is the media queries part of the code:
@media screen and (max-width: 375px) {
*[class="padding"] td, .padding td {
padding: 24px !important;
}
*[class="mobile_scale"], .mobile_scale {
width:100% !important;
max-width: 100% !important;
min-width: 100% !important;
}
*[class="shorten_space"], .shorten_space {
height: 16px !important;
line-height: 16px !important;
}
*[class="mobile_scale"] img, .mobile_scale img {
width:100% !important;
height: auto;
}
*[class="mobile_center"], .mobile_center {
align-items: center !important;
text-align: center !important;
margin: 0 auto !important;
}
*[class="sub_button"], .sub_button {
align-items: left !important;
text-align: left;
padding-top: 16px;
}
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
不幸的是，Campaign Monitor在电子邮件中的文章非常过时。
您根本不需要这些：
*[class =“ shorten_space”]。我相信，从内存来看，这是为Yahoo Webmail上课的入侵，并且它们已经更新了几年，因此我们不再需要。只需使用标准CSS，即
.shorten_space（对于所有这些），
这就是为什么它不会在Gmail应用程序上的原因，而不是iOS。那是因为Gmail删除了它不同意的所有样式块。
我会说为什么它不适合iOS的原因是375px限制的原因。如今，iPhone往往会更大。尝试将其撞到450px左右。
Campaign Monitor's articles on email are very dated, unfortunately.
You don't need these at all:
*[class="shorten_space"]. I believe from memory that was a hack to get classes working for Yahoo webmail, and they've updated years back so we don't need that anymore.Just use the standard css, i.e.
.shorten_space(For all of them)
That would be a reason why it wouldn't on Gmail apps, though, not iOS. That's because Gmail removes all style blocks that it doesn't agree with.
I'd say the reason why it wasn't working for iOS, though, is becaues of the 375px limit. iPhones tend to be larger these days. Try bumping that up to 450px or so.