iPhone電子郵件的寬度為100％
[英]100% width on iPhone email
問題描述
我正在制作一封HTML電子郵件，當人們使用聯系表格時，從我的網站發送，並且我已經完成了所有的測試，我已經設法解決了許多錯誤，但盡管經過多次嘗試和大量搜索，我仍然可以似乎設法讓我的電子郵件在iPhone上占據100％的寬度。
以下是該問題的屏幕截圖： http ： //i62.tinypic.com/2r6mh5y.png
這是我正在使用的代碼的副本：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="format-detection" content="telephone=no">
<title></title>
<style type="text/css">
html, body { width: 100% !important; }
p { font-family: Arial; }
a { font-family: Arial; }
td { font-family: Arial; }
</style>
</head>
<body bgcolor="#000000" style="font-family:Arial; min-width:100%; background-color:#000000; margin:0; padding:0;" topmargin="0">
<table width="100%" bgcolor="#000000" style="width:100%; background-color:#000000; background-image:url(http://newsite.moninfolettre.ca/images/courriel/top_bg.jpg); background-position:center top; background-repeat:repeat repeat;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td width="600" height="130" align="center" valign="middle">
<img src="http://newsite.moninfolettre.ca/images/courriel/logo_courriel.png" alt="Geant du web - Infolettre" width="168" height="61" style="font-size:18px; font-family:Arial; color:#FFFFFF;" />
</td>
<td> </td>
</tr>
</table>
<table width="100%" bgcolor="#CD0C11" style="width:100%; background-color:#CD0C11" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="4" style="font-size:1px;-webkit-text-adjust:none;"> </td>
</tr>
</table>
<table width="100%" bgcolor="#F2F2F2" style="width:100%; background-image:url(http://newsite.moninfolettre.ca/images/courriel/shadow.jpg); background-position:center top; background-repeat:repeat no-repeat; background-color:#F2F2F2" border="0" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td width="520">
<table>
<tr>
<td style="font-size:32px; padding:20px 0 0; white-space:nowrap;">Votre transaction est</td>
</tr>
<tr>
<td style="font-size:32px; font-weight:900; color:#E30512; padding:0 0 15px; white-space:nowrap;">
complétée avec succès !!
</td>
</tr>
</table>
</td>
<td> </td>
</tr>
</table>
<table width="100%" bgcolor="#FFFFFF" style="width:100%; background-color:#FFFFFF" border="0" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td width="520" style="padding:20px 0 0; color:#5A5A5A">
<p style="margin:0 0 20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p style="margin:20px 0;">Praesent nulla felis, malesuada eu sapien vitae, pretium dictum dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam faucibus dui in est euismod, at sollicitudin elit aliquam. Nulla augue ante, tincidunt vel sodales id, tincidunt non nibh.</p>
<p style="margin:20px 0;">In hac habitasse platea dictumst. Aliquam feugiat aliquam tortor, id vestibulum dui rutrum vel. Nulla tincidunt, tortor vitae iaculis scelerisque, ipsum augue gravida ipsum, ac faucibus mauris urna et tortor.</p>
<p style="margin:20px 0;">Duis luctus pretium turpis, sed iaculis mauris commodo at. Aliquam dictum venenatis enim et tincidunt. In hac habitasse platea dictumst. Sed viverra laoreet neque, vel sodales tellus luctus vitae.</p>
<p style="margin:20px 0;">Merci d'avoir fait confiance à <strong style="font-weight:900;">GÉANT DU WEB !</strong></p>
</td>
<td> </td>
</tr>
</table>
<table width="100%" bgcolor="#F2F2F2" style="width:100%; background-color:#F2F2F2" border="0" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td width="600">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="40"> </td>
<td width="260" style="padding:30px 0 20px;">
<table>
<tr>
<td style="padding:0 0 10px;">Accèdez dès maintenant à</td>
</tr>
<tr>
<td>
<table width="165" height="35" bgcolor="#E30512" style="width:165px; background-color:#E30512; border-radius:10px;">
<tr>
<td align="center" valign="middle" style="font-size:14px; font-weight:900; text-transform:uppercase;">
<a href="#" style="text-decoration:none; color:#FFFFFF;">Votre compte</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding:20px 0 10px;">ou contactez notre équipe:</td>
</tr>
<tr>
<td style="color:#5A5A5A;">Sans frais</td>
</tr>
<tr>
<td style="font-size:24px; font-weight:900; color: #E30512; line-height:100%; padding:0 0 10px;">1-888-86-GÉANT</td>
</tr>
<tr>
<td style="color:#5A5A5A;">Montréal</td>
</tr>
<tr>
<td style="font-size:24px; font-weight:900; color: #E30512; line-height:100%; padding:0 0 20px;">(514) 359-2949</td>
</tr>
<tr>
<td>Besoin de <a href="#" style="font-weight:bold; color:#000000;">Support en ligne</a> ?</td>
</tr>
</table>
</td>
<td width="300" valign="bottom" style="padding:0px;">
<img src="http://newsite.moninfolettre.ca/images/courriel/robot.jpg" alt="" style="display:block;" width="300" height="280" />
</td>
</tr>
</table>
</td>
<td> </td>
</tr>
</table>
<table width="100%" bgcolor="#000000" style="width:100%; background-color:#000000; background-image:url(http://newsite.moninfolettre.ca/images/courriel/bottom_bg.jpg); background-position:center top; background-repeat:repeat repeat;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td width="600" height="100" align="center" valign="middle">
<a href="www.moninfolettre.ca" style="font-size:24px; text-decoration:none; text-transform:uppercase; color:#FFFFFF;">
<span style="color:#FFFFFF;">www.moninfolettre.ca</span>
</a>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
2 個解決方案
解決方案1
0 2014-05-21 13:27:44
Mobile Safari的默認視口寬度為980px，因此它使用980px作為div的包含元素的寬度。 這就是您的布局已損壞的原因。 您可以在視口中修改此設置，或者以像素為單位添加設計的最小寬度：“您的體寬”; 到你的身體。 Mobile Safari將使用最小寬度值來設置其視口。
設置視口
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
解決方案2
0 2015-10-15 04:08:11
您希望寬度為100％的任何元素，添加一個基於像素的min-width附加元素
例如：
width: 100%;
min-width: 600px;
或者內聯<table style="min-width: 600px; width: 100%;" width="100%"> <table style="min-width: 600px; width: 100%;" width="100%">
我將寬度屬性加倍，只是為了額外的擔保。 你永遠不會知道...... :)
HTML Outlook 2013電子郵件超過面板寬度的100％寬度width =“ 100％”設置
[英]HTML Outlook 2013 email exceeding 100% width of panel width width=“100%” set
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
HTML電子郵件中div的100％寬度樣式不適用於iPhone
html 電子郵件的 100% 表格寬度
頁腳不會在iPhone上擴展到100％的寬度，為什么？
iPhone 6/6 Plus截取寬度為100％的內容
HTML div無法覆蓋iPhone中的全部100％寬度
iPad和iPhone上的瀏覽器寬度不是100％，其余的都可以
iPhone上的容器DIV寬度不是100％
HTML電子郵件模板寬度100％無法在gmail中使用
電子郵件中具有單個固定寬度單元格的100％寬度表
HTML Outlook 2013電子郵件超過面板寬度的100％寬度width =“ 100％”設置
相關標簽