iOSのGmailとAndroidのGmailのレンダリングが異なる

Question

私はメールベースのレイアウトを使用してメールを書いています。電子メールアカウントに送信すると、Android用Gmailの「モバイルに最適化された」小さなフォームで表示されますしかし、iOS用のGmailではフルサイズ（したがって小さなテキスト）で表示されます。

ここで何が起こっているのでしょうか？私はこれが最も明白な質問ではないことを知っています。そして、それを差異の原因となっている特定のhtmlのセットに絞り込むことはできません。グーグルでも明らかな結果は得られなかった。

ありがとうございます！

<table width=100% cellspacing="0" cellpadding="0" style="" class=""> 
    <tr width="100%"> 
     <td width="100%" style=" 
     padding: 10px; 
     box-shadow: 0 2px 0 0 #f1f1f1; 
     background-color: #ffffff; 
    " class=""> 


<table cellspacing="0" cellpadding="0" width='100%' style='' align='' class=""> 


<tr style='' class=''> 


<td width='' height='' style=' 
     width: 150px; 
     min-width: 150px; 
     line-height: 0; 
    ' align='' valign='top' class='list-card__header' colspan='1'> 


<table cellspacing="0" cellpadding="0" width='100%' style='' align='' class=""> 


<tr style='' class=''> 


<td width='' height='' style=' 
     width: 150px; 
     max-width: 150px; 
     height: 75px; 
     line-height: 0; 
     overflow: hidden; 
    background-color:#dedede' align='center' valign='middle' class='list-card__image-wrapper' colspan='1'> 

            <img class="list-card__image" src="https://cdn.evbstatic.com/s3-build/perm_001/f8c5fa/django/images/discovery/default_logos/4.png" style=" 
     overflow: hidden; 
     max-width: 150px; 
     height: 75px; 
    " border="0" /> 

</td> 


</tr> 


</table> 


</td> 


<td width='*' height='' style=' 
     padding-left: 15px; 
     min-width: 150px; 
    ' align='left' valign='top' class='list-card__body' colspan='1'> 

         <div class="list-card__date" style=" 
     text-overflow: ellipsis; 
     overflow: hidden; 
     white-space: nowrap; 
     color: #343434; 
     font-size: 12px; 
     line-height: 20px; 
     height: 20px; 
     text-transform: uppercase; 
     letter-spacing: 1px; 
     padding-top: 5px; 
     min-width: 150px; 
     width: 150px; 
    "> 
          Sat, Dec 31 
         </div> 
         <div class="list-card__title" style=" 
     display: -webkit-box; 
     -webkit-line-clamp: 2; 
     -webkit-box-orient: vertical; 
     overflow: hidden; 
     height: 36px; 
     max-height: 36px; 
     color: #333333; 
     font-size: 15px; 
     font-weight: 700; 
     line-height: 18px; 
     letter-spacing: 0; 
     min-width: 150px; 
    "> 
          Hunger Plus, Inc. 
         </div> 
         <div style=" 
     display: -webkit-box; 
     -webkit-line-clamp: 1; 
     -webkit-box-orient: vertical; 
     text-overflow: ellipsis; 
     overflow: hidden; 
     font-size: 12px; 
     line-height: 20px; 
     height: 20px; 
     color: #8c8c8c; 
     min-width: 150px; 
     width: 150px; 
     height: 20px; 
     max-height: 20px; 
    "> 
          Hunger Plus, Inc. 
         </div> 

</td> 


</tr> 


</table> 


     </td> 
    </tr> 

Answer 1

HTMLはグラフィック形式ではなく、すべてのプラットフォームで完璧なピクセル結果を保証します。そのようなもののためには、PDFははるかに近い（またはテキスト情報が完全に失われた画像）。

HTMLは「ハイパーテキストマークアップ言語」なので、主にテキストコンテンツを転送するように設計されており、コンテンツの処理（レンダリング/使用）に役立つ追加のマークが付いています。

CSSでは、グラフィック出力の見積もりが多少改善されましたが、何かを想定するのはあまり安全ではありません（たとえば、使用している銀行のウェブがデスクトップ上で壊れています。テーブルのレイアウト設計、値ラインとラベルとのずれを相殺するビット）。

これはHTMLですが、あなたは電子メールについて話しています。あなたがGmailだけを目標にしている限り、少なくともあなたは結果がどのように見えるかを確認することができます。しかし、受信者がGmailアプリでそれを読んでいると仮定せずに、適切な普遍的な電子メールを送信したい場合は、実際には有効なプレーンテキストバージョン（HTMLと一緒に）を送信する必要があります。 HTML拡張は標準の一部ではなく、まだ私のようなテキスト専用のメールクライアントを使用している人の約3％に過ぎません。

あなたの問題は何ですか、小さなテキストですか？あなたのメールは主に携帯電話の画面で読まれるはずですか？それから列の数を減らしてテーブルを作成すると、十分に狭くなりますか？または、さまざまなスクリーン幅を報告するデバイス用にさまざまなレイアウトのバリエーションを作成するために、いくつかのCSSマジックをチェックしてください。各デバイスは別の画面を持っている、またはユーザーがウィンドウだけでメールアプリを実行してもよいし、ユーザが、異なるフォントサイズを強制することができますよう

いずれかの方法で、あなたは

など、ピクセル完璧なレンダリングを期待することはできません

あなたのHTMLが合理的に設計されていれば、別のデバイス/アプリケーションがあなたのHTMLを違った形でレンダリングすることは問題ではありません。

Answer 2

は私が誤解することができますが、それは最初の行を変更するようになっています。これに

<table width=100% cellspacing="0" cellpadding="0" style="" class=""> 

：

<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;"> 

は、問題を解決します。 <table width=100% ...>はレイアウトを全幅にしていました。編集されたコードは電子メールを100％にしますが、最大600pxにすぎません。したがって、電子メールは大画面では広がり、小画面では縮小します。