如何獲得此響應式css可用於Android版Gmail？

我稍微修改了由Litmus.com爲我自己的項目創建的響應電子郵件模板。在開發人員的工具移動視圖中查看時，它的行爲與我在瀏覽器（Chrome）中的預期相同。但是，在Android 7.1.2 Nougat（不是imap帳戶）的Gmail應用程序中查看時，設計看起來非常不同。我想看看發生了什麼，但由於無法查看應用程序中呈現的代碼，所以我無法查看底層。如何獲得此響應式css可用於Android版Gmail？

例如，文本不是居中對齊，圖像看起來很小，按鈕沒有跨越整個寬度。以下是Chrome瀏覽器中的Mobile視圖與Android版Gmail應用程序並排比較的屏幕截圖。

我已經從各種渠道獲悉通過媒體查詢響應CSS支持的Gmail應用程序閱讀，所以我很困惑。我一直在這個工作了很長一段時間，感覺卡住了。任何幫助正確的方向解決方案或建議將非常感激。

這是我的代碼。 https://codepen.io/anon/pen/mMoNqm

<!DOCTYPE html>

來源

2017-09-05 Ally

電子郵件你可以使用XHTML0.1它的工作面糊？ –

我將它改爲<！DOCTYPE html PUBLIC「 - // W3C // DTD XHTML 1.0 Transitional // EN」「http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd」>但這並沒有影響到它。 – Ally

我已經注意到，如果在媒體查詢空格，則Gmail中不工作那麼好。我已刪除周圍的空間

@media screen and (max-width:525px), screen and (max-device-width:525px)  
{ 
}

這是我使用的代碼，它適用於Gmail應用程序android。

@media only screen and (max-width:480px) { 
.wrapper{background-color:#ff0000 !important;} 
}

我剛剛測試過它，它工作。我的Gmail應用版本是7.8.13.166937981。

希望以上幫助。

來源

2017-09-05 23:46:59 Syfer

我壓縮這樣的響應css： – Ally

我壓縮響應的css是這樣的：https://codepen.io/anon/pen/MvRZzL 但它不適合我。我使用的是與Android 7.1.2相同的Gmail版本。我是否錯誤地刪除了CSS中的空格？如果問題不是太多，你會告訴我一張它如何看起來以及如何刪除空間以使其工作的截圖？ – Ally

我仍然看到空格'max-width：525px'在兩種情況下刪除525px之前的空格，然後重試。 – Syfer

看起來你的電子郵件通過疊加混合編碼列，但通過媒體查詢比對未生效。這可能是因爲媒體查詢支持不是擴展到每個Gmail電子郵件產品。根據Android版本和電子郵件類型（您的電子郵件是否爲POP帳戶？），某些Gmail產品仍然會忽略媒體查詢中的任何內容。

這裏是哪裏的推出代表快速擊穿：

More info and updated charts on Litmus

來源

2017-09-05 13:18:08

我正在使用Gmail應用程序的Android 7.1.2牛軋糖與標準的Gmail帳戶進行測試。就我所知，它不是一個imap或pop賬戶。 – Ally

如何獲得此響應式css可用於Android版Gmail？

回答

相關問題