2016-01-27 18 views
0

我目前正在爲各種客戶開發一個html電子郵件,並且使用Gmail(yay)有一些奇怪的問題 - 特別是在通過瀏覽器查看電子郵件時。 (在應用程序中沒有問題)Gmail將最大寬度(以%爲單位)更改爲px?

只有在小屏幕上使用瀏覽器(例如移動設備)時纔會出現問題 - 儘管有最大寬度,但所有圖像都顯示得過寬,這意味着佈局被拉伸並且需要水平滾動。雖然它會導致在桌面上沒有任何問題,同樣的事情發生在代碼

在我的圖片,我給自己定的每個圖像

style="max-width:100% !important;" 

在線。我也有在頭上<style>塊與

img {max-width: 100% !important;} 

當檢查圖像元素(包括我的手機和PC上),我看到沒有從頭部的最大寬度,這是不完全的標誌意外。

什麼奇怪的是,每個圖像仍然具有最大寬度設置inline-但它不再%,但在PX。

在PC瀏覽器檢查,內聯最大寬度現在說

max-width: 1920px; 

看我的手機上(機器人,內嵌最大寬度是

max-width: 767px; 

在這種情況下,圖像現在WAY太廣,更是打破了佈局,同樣的事情發生在所有圖像,不論其實際大小。

我沒有看到任何消息告訴我的電子郵件一直廣告爲我的屏幕或任何選項打開或關閉此功能。

以前有沒有人有過這種情況?關於如何防止gmail與最大寬度混淆,或者讓它尊重頭部最大寬度的任何想法? (我已經避免使用類或ID來附加頭部樣式,據我所知,谷歌去掉這些)

即使是怪異的(或者我可能會失去它......)我很確定這個正在昨日...

更新:想我已經解決了爲什麼它顯然昨天的工作 - 這是不是 - 我在開發工具所做的更改,當我重新加載沒有結算,所以最大寬度我添加了作爲一個測試(複製在頭部的最大寬度)仍然存在...

經過多一點玩,在所有寬圖像上添加width: 100% !important;內聯似乎工作作爲一個修復 - gmail doesn與價值無關。知道爲什麼它會改變最大寬度的值仍然很有趣,如果有人有任何線索的話!

回答

0

Gmail是臭名昭著的不當使用其maxwidths的佈局設置。

儘量避免對不屬於高層次的容器元素最大寬度設置爲百分比值。你也會遇到怪異的渲染,比如gmail應用。通常gmail應用程序會將所有寬度轉換爲最大寬度,這樣可以縮小您的內容,但仍然保持較高屏幕分辨率的結構。

Gmail的web應用程序做類似的事情。它限制了你可以設置元素的寬度,所以你不能添加比你的顯示更廣泛的東西,而gmail web應用在此處顯示的寬度爲100%。

Gmail移動應用 - 力量您的內容爲320像素/ 480像素寬框

Gmail的桌面應用程序 - 強制你的內容不能超過你的屏幕解析度

Gmail的桌面對待風格的頭部很奇怪呢,它完全忽略了大多數類/ id(不要聽那些說它完全剝離它們的人),如果你使用其他標籤作爲標識符而不是#id和.class,它將應用這些樣式。例如

* [lang~="identifier"] 

朗是相當多的,您可以使用在正在使用的標籤的方式,即Alt鍵,標題和HREF不會得到唯一的標籤。

要小心,如果您使用媒體查詢或任何以style標記gmail中的「@」開頭的內容,可能會潛在地(取決於當天的感受)完全刪除該樣式標記。儘管可以通過在樣式標籤中添加這些樣式來避免這種情況。

總結。不要依靠最大寬度從內向外控制佈局,將像素值設置爲限制width =「100%」。

希望這會有所幫助

相關問題