久しぶりにHTMLメールを作成しました。標準メールアプリにて、コーディングと文字サイズの関係性を検証しました。gmailアプリでも同様の傾向でした。テンプレートはこちらを利用しています。横幅XXXpxで固定された実装の場合、スマートフォンから見たときのテキストサイズが変動します。指定している横幅が大きいほど、縮小して表示されます。環境によっては横スクロールが出る場合もあります。発生条件は確定していませんが、後から画像を読み込んだ際に発生する傾向があります。ソースはこのようになります。テーブルでもりもりコーディングしていきます。「横幅最大値まではリキッド、それ以上は固定」「フルリキッド」となるようなソースで組んだ場合。スマートフォンから見たときのデバイステキストサイズが固定されます。ソースはこのようになります。テーブルでもりもりコーディングしていきます。--></table></td></tr></table>HTMLメールでもメディアクエリ解禁の兆しgmailでもメディアクエリが利用できるようになりました。メディアクエリに対応しているブラウザはこちらの通りです。標準メールアプリメディアクエリを使い、デバイス幅に合わせて文字サイズなどを変更する実装も現実的になったと思います。デスクトップのメールアプリケーションを中心として、依然として対応しない環境もありますので、「メディアクエリに対応していれば読みやすいが、対応していなくても読める」レベルを目指すとちょうどいいと思われます。リキッド+最大横幅固定がオススメリキッドデザインで組むと、スマートフォンで見た横幅に関わらず、デバイステキストサイズが固定されます。あらゆる横幅の指定を%にする必要があるため手間はかかりますが、テキストのサイズをコントロールしやすいという観点からはおすすめです。添付する画像をスマートフォンでどの程度の密度で見せたいかを基準に考えるといいかと思います。画像の中にテキストを入れていきたい場合は、画像の横幅を広げる程縮小度が上がる点に留意するといいです。Comment最近の投稿その手があったか...!参考にしたい海外の観光プロモーション事例4選。