私は自分の会社の 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;
}
}
メールは 3 つの部分に分かれています: 1) 4 ～ 5 行のテキスト
text
text
text
text
2) 画像 小さな画像とテキスト
-------------
| | text 1
| | text 2
| img1 | text 3
| | text 4
-------------
3) 3 つの大きな画像:
---------------------
| |
| |
| |
| |
| img2 |
| |
| |
| |
| |
---------------------
---------------------
| |
| |
| |
| |
| img3 |
| |
| |
| |
| |
---------------------
---------------------
| |
| |
| |
| |
| img4 |
| |
| |
| |
| |
---------------------
私が直面している問題は、メディア クエリが iPhone の組み込みメール アカウントに対して正常に機能することです。
問題は iPhone の Gmail アプリにあります。メールのパート 1 とパート 2 は約 60 ～ 65% に縮小されすぎており、パート 3 は問題ありません。
また、ほとんどの電子メール クライアントが外部 CSS ファイルを削除するため、インライン CSS を行う HTML コーディングの最も原始的な方法を使用しています。
厳密な NDA があるため、ここにコードを掲載することはできませんが、これは電子メール テンプレートをコーディングしているすべての人に共通の問題であるに違いないと思います。ヒントや指針はありますか？