モバイルデバイスのHTML電子メールでfont-sizeにvw（ビューポート幅）を使用することはできますか？

Question

HTML電子メールテンプレートを作成しています。デスクトップバージョンはテーブルで、行内CSSは少なく、すべてのサイズは％またはpx値で定義されています。

モバイル版の場合はdivとcssで作業します。今私は、ビューポートの幅に応じていくつかのテキストのサイズを変更したいと思います。ヘッダーのfont-sizeを28pxと定義すると、特定のテキストはより広いデバイスでは正常に見えるかもしれませんが、小さいデバイスではテキストが大きくなり次の行に壊れます。

は今、私はこのようなベースフォントサイズを設定し検討しています： このように（フルページモードでのスニペットを実行し、効果を確認するためにウィンドウのサイズを変更する）

:root { 
 
    font-size: calc(8px + 4vw); 
 
}

<h1> 
 
    Header 1 
 
</h1> 
 
<h2> 
 
    Header 2 
 
</h2> 
 
<p> 
 
    Lorem ipsum dolor sit amet, quo eripuit menandri instructior ad, nostro iracundia nam at. Etiam quaerendum vis no. Percipit accommodare ne eum. Alia molestie democritum vix no, natum habemus ei eum, qui ut adhuc partem luptatum. 
 
</p>

後続のフォントサイズはビューポートの幅に応じてスケーリングされ、小さいデバイスではヘッダーが小さくなり、テキストが破損することがなくなります。 calc（）を使うことで、最小値を定義するので、テキストが小さくなりすぎることはありません。

は今、私の質問は、Eメール（携帯電話）のためにこれを使用するためにOKです、またはそれがひどくモバイル電子メールクライアントでサポートされている場合ですか？ブラウザのサポートはかなり良いですが、モバイル電子メールクライアントのサポートに関する情報は見つかりませんでした。

Answer 1

こんにちは、あなたは常に、CSSのサポートがhttp://caniuse.comにオーバー属性を確認することができます。私はこれを見つけました：http://caniuse.com/#search=vwこれはiOS 8.4とAndroid 4.4以上のサポートを示しています。それほど素晴らしいことではなく、多くの人がまだiOS7にいると想像しています（OK、おそらく私！）。

私はあなたがおそらくどこでも働いているこのtechinqueに頼るべきではないことに同意します。

Answer 2

Pxは、クライアントとデバイス間のHTML電子メール開発におけるフォントサイズの唯一の一貫したユニット宣言です。 （https://www.campaignmonitor.com/blog/email-marketing/2011/04/should-i-use-em-or-px-when-coding-for-html-email/）。モバイルデザインで

、大きなテキストは、通常は良いですが、見出しなどの項目がデザインに合うように縮小しなければならない時間があります。ここで最善のオプションは、モバイル向けのデザインでメールを作成し、メディアクエリとMSO条件を使用してデスクトップ用に展開することです。

電子メールの50％以上がモバイルデバイス（http://www.emailmonday.com/mobile-email-usage-statistics）で開かれており、Gmailや他の多くのサードパーティの電子メールアプリケーションが完全にスタイルタグを削除しているため、デフォルトのモバイルを使用する方が理にかなっています。

Gmailのウェブクライアントの動作に役立つオプションがあります（http://freshinbox.com/blog/interactive-emails-in-gmail-using-css-attribute-selectors/）classとidは機能しませんが、lang属性（または最近テストされた要約またはaria-labelledby属性）のスタイリングを使用すると、 Gmailのウェブメール版のレイアウトをある程度制御します。