iOS上的Gmail和Android上的Gmail呈現不同

我有一封電子郵件我正在撰寫使用基於表格的佈局，這些佈局在發送到電子郵件帳戶時，會在Android版Gmail的「移動優化」較小表單中呈現行，但在iOS版Gmail上呈現爲全角（因此爲小文字）。iOS上的Gmail和Android上的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>

來源

2016-08-23 phildini

我有很多想法，可能會出錯:)你可以發佈你嘗試過的代碼的一個小例子嗎？ –

HTML不是圖形格式，保證了每個平臺上的像素完美結果。對於類似這樣的內容，PDF更接近（或者圖像，完全沒有文本信息）。

HTML是「超文本標記語言」，所以它主要用於傳輸文本內容，並附加標記以幫助處理（呈現/使用）內容。

CSS在圖形輸出方面做出了更多的預測，但它仍然不是很安全的假設任何東西（例如我使用的銀行網頁在我的桌面上看起來很糟糕，因爲我使用強制的最小字體大小，位的表格佈局設計，抵消價值線與標籤不同步）。

但這是HTML，而你正在談論電子郵件。只要你的目標只是Gmail，至少你可以檢查結果是什麼樣子。但是，如果您想發送適當的通用電子郵件（而不是假設接收方正在使用Gmail應用程序閱讀），則實際上應該發送有效的純文本版本（與HTML一起）。 HTML擴展甚至不是標準的一部分，仍然有約3％的人使用純文本郵件客戶端（像我一樣）。

那麼你的問題是什麼？你的電子郵件是否應該主要在手機屏幕上閱讀？然後用較少的列創建表，所以它會足夠窄？或者查看一些CSS魔術來爲報告不同屏幕寬度的設備創建佈局的不同變體。

無論哪種方式，你不能指望像素完美呈現，因爲每個設備都有不同的屏幕，或者用戶可以在窗口只能在運行郵件應用程序，或者用戶可以執行不同的字體大小等

所以，正常情況下，不同的設備/應用程序會以不同的方式呈現HTML，如果您的HTML設計合理，它不應該對您造成任何問題。

來源

2016-08-23 17:34:45 Ped7g

我可以誤解，但它看起來像改變第一行：

<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，因此電子郵件將在大屏幕上變寬，並在較小的電子郵件上縮小。

來源

2016-08-23 20:49:00

iOS上的Gmail和Android上的Gmail呈現不同

回答

相關問題