2011-08-10 27 views
3

我想知道,因爲我看到了很多不同的答案。最終我會認爲500-600px會沒事的。特別是如果你正在建立符合Hotmail,Gmail,Outlook,Mail.app等的標準。您應該使用HTML電子郵件通訊的最大寬度是多少?

但我想聽聽別人對此事的看法。是否有適合開發電子郵件新聞稿的套裝尺寸?這是談論用HTML表格構建模板。

回答

5

IMO你不應該設置寬度。和其他許多人一樣,我傾向於在手機上查看我的電子郵件。擁有智能手機的用戶數量正在增長;同樣使用手機查看電子郵件的用戶也是如此。

你永遠不知道用戶處於什麼樣的分辨率。如果你想讓他們真正閱讀你的信息,而不是隻是刪除它,因爲它會導致令人討厭的水平滾動,如果可能的話,避免設置寬度是一個好主意。

+0

由於這是一個很好的提示。我沒有考慮智能手機的電子郵件,但你是對的 - 這是巨大的。 – Jake

-1

爲了便於查看,請將Windows分辨率(或Mac分辨率)更改爲儘可能最小。看看它是什麼樣子。雖然,我會堅持800x600的網站基線分辨率。我會假設這也適用於以HTML格式發送的電子郵件。

如果您希望以HTML格式打印新郵件(適用於物理打印機),當頁面打印並將媒體屬性翻轉爲「打印」時,我會針對不同的瀏覽器使用不同的樣式表。然後,根據應用樣式的時間以及最終用戶是將打印頁面打印到物理打印機還是使用HTML查看,它看起來會有所不同。用不同的瀏覽器徹底測試。我在不同的瀏覽器中看到了打印預覽打印比例變化中的奇怪行爲。有時規模不會持續。谷歌瀏覽器是使打印秤精確的最糟糕的。它們對於性能和樣式的一致性非常好,但在發送到打印機時很差。在IE 9中,打印比例默認不會持續。在Mozilla的某些版本中,您需要在實際變爲100%之前將該比例強制爲125%(或100%以外的任何比例),然後再設爲100%。我不會詳細討論,但是這段代碼會讓你開始學習如何使用媒體屬性。印刷規模「收縮適合」是你最大的敵人。如果瀏覽器支持CSS3,那麼你有更多的選擇,並可以更好地控制你的通訊打印!

例子:

<style type="text/css" media="all"> 
    .printPage { height:100%; width:100%; position:relative; } 
</style> 

<style type="text/css" media="print"> 
    .printPage { height:8.5in; width:100%; position:relative; } 
</style> 

這裏是一個很好的代碼片段,如果你想在你的頁面頁眉/頁腳:

<html> 
<head> 


<style type="text/css" media="all"> 
thead { display: table-header-group; vertical-align:top; } 
tfoot { display: table-footer-group; vertical-align:bottom; } 
.printPage { height:11.5in; } 
</style> 

<style type="text/css" media="print"> 
.printHeader { display: table-header-group; vertical-align:top; } 
.printFooter { display: table-footer-group; vertical-align:bottom; } 
.printPage { height:100%; } 
</style> 

</head> 
<body> 
<table class="printPage"> 
    <thead class="printHeader"><tr><td>Your header goes here</td></tr></thead> 
    <tbody> 
    <tr><td> 
    Page body in here -- as long as it needs to be 
    </td></tr> 
    </tbody> 
    <tfoot class="printFooter"><tr><td>Your footer goes here</td></tr></tfoot> 
</table> 
</body> 
</html> 
+1

問題是有關HTML上的新聞稿/電子郵件,而不是打印的最大限度。 – BerggreenDK

相關問題