我正在为我的公司制作一个 html 电子邮件模板。我有一个缩小问题,它使 html 电子邮件模板的某些部分看起来比其他部分小。
我使用以下媒体查询
@media only screen and (max-device-width: 380px) {
.mobileWidth {
width: 290px !important;
}
img {
max-width: 130px !important;
max-height: 130px !important;
}
.test {
width: 290px !important;
text-align: center !important;
}
.hideMobile {
display: none;
}
}
电子邮件分为三部分: 1) 4-5 行的文本
text
text
text
text
2) 图像 小图像和文本
-------------
| | text 1
| | text 2
| img1 | text 3
| | text 4
-------------
3)三个更大的图像:
---------------------
| |
| |
| |
| |
| img2 |
| |
| |
| |
| |
---------------------
---------------------
| |
| |
| |
| |
| img3 |
| |
| |
| |
| |
---------------------
---------------------
| |
| |
| |
| |
| img4 |
| |
| |
| |
| |
---------------------
我面临的问题是媒体查询适用于 iPhone 内置邮件帐户。
问题出在 iPhone 的 gmail 应用程序上。电子邮件的第 1 部分和第 2 部分被缩小到大约 60-65%,第 3 部分很好。
而且我正在使用最原始的 html 编码方式进行内联 CSS,因为大多数电子邮件客户端都剥离了外部 CSS 文件。
因为我有严格的保密协议,所以我不能在这里发布代码,但我认为这对于所有编写电子邮件模板的人来说一定是一个常见问题。任何提示或指示?