Question

我花了大约4个小时在这个HTML电子邮件模板上，无论我改变什么字体都拒绝在iphone上增加。

我在我的智慧结束，并希望在我的脑海里爆炸之前能得到任何帮助。

提前致谢。

下面包含代码和截图。

我只是在寻找足够大的字体以使其清晰可辨。只是希望正文副本是标题的大小，标题仍然大致相同的数量。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<style type="text/css">
table, tr, td {font-size:16px; }
table {border-collapse: collapse;}
.content {width: 640px !important;}
td.fw {padding:25px 25px 25px 25px}
td.hw.l {padding:25px 20px 25px 25px}
td.hw.r {padding:25px 25px 25px 20px}
.whitetxt {color:#ffffff;}
.null {padding:0px 0px 0px 0px;}
.blue {color:#0085c1;}
.red {color:#fa696e; }
.twenty {font-size:20px;}
.h1 {font-size:28px; font-weight: bold;}
.h2 {font-size:18px; font-weight: bold;}
.thirteen {font-size:13px;}
.sixteen {font-size:16px;}
.thirty-four {font-size:34px; font-weight:bold;}
.strong {font-weight:bold;}
.middle {vertical-align:middle;}
.bottom-border {border-bottom: 2px solid #f1f1f0}

@media only screen and (max-device-width: 480px) {
[class=content] {width: 320px !important;}
[class=thirteen] {font-size:16px;}
}
</style>
</head>

<body style="margin:0 0 0 0; padding:0 0 0 0; font-family: Arial, Verdana, Sans Serif;color:#3c3c3c; -webkit-text-size-adjust:none;">

<table width="100%" style="font-size: 15px;border-collapse: collapse;">
<tbody>
<tr >
<td width="auto" ></td>
<td width="80%" class="content" style="font-size: 15px;width: 640px;">

<!-- main content table -->
<table class="main-table" style="font-size: 15px;border-collapse: collapse;">

<tr class="fw" >
<td class="fw middle" valign="middle" colspan="2" style="font-size: 15px;vertical-align: middle;padding: 25px 25px 25px 25px;">
<img align="left" class="logo" src="http://meetbryce.com/client-files/mim/logo.png" alt="Make It Mine" border="0"><span class="thirty-four" style="font-size: 34px;font-weight: bold;">thank you for applying!</span><br>
<span class="red sixteen" style="color: #fa696e;font-size: 16px;">your account number is <strong>CFA0027852</strong></span>
</td>
</tr>

<tr class="fw" >
<td class="fw whitetxt" colspan="2" bgcolor="#004d7c" style="font-size: 1px;color: #ffffff;padding: 25px 25px 25px 25px;">
<span class="thirteen" style="font-size: 13px;">We appreciate your order! Please find attached the relevant paperwork for your new computer. It's in PDF format so you'll need a modern browser or Adobe Reader to open it. You will also get the paperwork via post in your letterbox, it will include a prepaid envelope for easy return to us.</span>
</td>
</tr>

<tr class="hw" >
<td class="hw l" width="50%" bgcolor="#ecf4f7" align="right" style="font-size: 15px;padding: 25px 20px 25px 25px;">
Jonathan Swanston <span class="blue" style="color: #0085c1;">is my name</span><br><br>
jswanston@gmail.com <span class="blue" style="color: #0085c1;">is my email</span><br><br>
0425-353-217 <span class="blue" style="color: #0085c1;">is my phone</span>
</td>
<td class="hw r" width="50%" bgcolor="#ecf4f7" style="font-size: 15px;padding: 25px 25px 25px 20px;">
<span class="blue" style="color: #0085c1;">my sex is</span> Male<br><br>
<span class="blue" style="color: #0085c1;">my birthday is</span> 4th November, 1988<br><br>
<span class="blue" style="color: #0085c1;">my benefit is</span> 111-555-666-1
</td>

</tr><tr class="null" style="font-size: 15px;padding: 0px 0px 0px 0px;">
<td class="null" colspan="2" bgcolor="#ecf4f7" align="center" style="font-size: 15px;padding: 0px 0px 0px 0px;">
<img src="http://meetbryce.com/client-files/mim/divider.png" width="100%" alt="&nbsp;" border="0">
</td>
</tr>

<tr >
<td class="hw l" width="50%" bgcolor="#ecf4f7" align="right" style="font-size: 15px;padding: 25px 20px 25px 25px;">
<span class="blue" style="color: #0085c1;">my home address</span><br><br>
Unit 2A<br>
6 Carnarvon Road<br>
Caulfield North<br>
Victoria 3161
</td>
<td class="hw r" width="50%" bgcolor="#ecf4f7" style="font-size: 15px;padding: 25px 25px 25px 20px;">
<span class="blue" style="color: #0085c1;">my delivery address</span><br><br>
Unit 2A<br>
6 Carnarvon Road<br>
Caulfield North<br>
Victoria 3161
</td>
</tr>

<tr class="fw" >
<td class="fw whitetxt" colspan="2" bgcolor="#0085c1" align="center" style="font-size: 15px;color: #ffffff;padding: 25px 25px 25px 25px;">
<span class="h1" style="font-size: 28px;font-weight: bold;">what you've applied for... nice!</span>
</td>
</tr>

<tr class="null" style="font-size: 15px;padding: 0px 0px 0px 0px;">
<td class="null bottom-border" colspan="2" style="font-size: 15px;padding: 0px 0px 0px 0px;border-bottom: 2px solid #f1f1f0;">
<a href="#" target="_blank"><img src="http://meetbryce.com/client-files/mim/ipad.png" width="100%" alt="apple ipad 3 - 3G/WiFi 16gb - $30/week - $120/month - all together $1,560" border="0"></a>
</td>
</tr>

<tr class="fw" >
<td class="fw bottom-border" colspan="2" style="font-size: 15px;border-bottom: 2px solid #f1f1f0;padding: 25px 25px 25px 25px;">
<span class="h2" style="font-size: 18px;font-weight: bold;">Step 1. Set up your Centrelink deduction by:</span>
<br><br>
<span class="blue" style="color: #0085c1;">Logging into your Centrelink account online at http://www.centrelink.gov.au</span>
<ul>
    <li>Select ‘Deductions’, ‘add new deduction’ then click ‘Start’</li>
    <li>Enter the service providers CRN “555074568C”</li>
    <li>    Select service category ‘Food Clothing and Household Items’ and click continue</li>
    <li>Select ‘MAKE IT MINE / COMPUTERS FOR ALL’ and click continue</li>
    <li>Use the purchase details above to complete the deduction amount (fortnightly amount), frequency, start date (ASAP) and target amount.</li>
    <li>Confirm that all details are correct!</li>
</ul>
<span class="blue" style="color: #0085c1;">Or call Centrelink on 13 61 50</span>
<ul>
    <li>Let the Centrelink employee know that you wish to start payments into the "Make It Mine / Computers For All account" account.</li>
    <li>You will need to quote our Centrelink Reference Number: “555074568C”</li>
    <li>Provide the purchase details above to the Centrelink employee</li>
</ul>
<span class="blue" style="color: #0085c1;">Or visit a Centrelink outlet</span>
</td>
</tr>

<tr class="fw" >
<td class="fw bottom-border" colspan="2" style="font-size: 15px;border-bottom: 2px solid #f1f1f0;padding: 25px 25px 25px 25px;">
<span class="h2" style="font-size: 18px;font-weight: bold;">Fast track your application</span>
<br><br>
You can fast track your application by setting up your Centrelink deductions online and emailing or faxing your signed paperwork to us! 
<br><br>
<span class="blue sixteen" style="color: #0085c1;font-size: 16px;">Fast tracked applications can be approved within days and the package dispatched on approval!</span>
<br><br>
An additional copy of your paperwork will also be sent to your postal address. Once your paperwork is returned, and payments have been confirmed your order will move to the final stages of processing. Most orders ship directly through the manufacturer. Processing takes up to two working days after your account is approved for dispatch. After this point, please allow up to 8-10 working days for your order to be delivered. We will email and SMS you at every stage of the order progression.
</td>
</tr>

<tr class="fw" >
<td class="fw" colspan="2" style="font-size: 15px;padding: 25px 25px 25px 25px;">
<span class="h2" style="font-size: 18px;font-weight: bold;">Download your application receipt</span>
<br><img src="http://meetbryce.com/client-files/mim/pdf.png" alt="&nbsp;" align="left" border="0">
<span class="red strong" style="color: #fa696e;font-weight: bold;">contract-ord587fd27-1695-4a7e-8562-873ce4f087b6.pdf</span><br>
<strong>1206k</strong> <a href="#" target="_blank">View</a> <a href="#" target="_blank">Download</a>
</td>
</tr>

<tr class="hw" >
<td class="fw" bgcolor="#f1f1f0" style="font-size: 15px;padding: 25px 25px 25px 25px;">
<img src="http://meetbryce.com/client-files/mim/footer-logo.png" alt="Make it Mine copyright &copy; 2012 make it mine.&lt;br&gt;all rights reserved" align="left" border="0">
</td>
<td class="fw" bgcolor="#f1f1f0" style="font-size: 15px;padding: 25px 25px 25px 25px;">
<a href="#"><img src="http://meetbryce.com/client-files/mim/footer-facebook.png" alt="We like you… do you like us?" border="0"></a>
</td>
</tr>

</table>
<!-- end main content table -->
</td>
<td width="auto" ></td>
</tr>
</tbody>
</table>

</body>
</html>

Answer 1

更改字体大小调整的单位可以得到答案。

我将所有伪标题的单位更改为＆gt; 1em并删除了

table,tr,td {font-size:14px;}

这会让它假设字体大小是1em。

然后我添加了@media-query来调用一行代码，使用以下代码将表中的所有字体大小乘以1.2：

@media only screen and (max-device-width: 480px) {
   table {font-size:1.2em;}
}

现在看起来像这样：

Screenshot

如果您对完整代码感兴趣，请点击此处：

<head>
<style type="text/css">
@media only screen and (max-device-width: 480px) {
table {font-size:1.2em;}
[class=small-only] {display:inline;}
}
</style>
</head>

<body style="margin:0 0 0 0; padding:0 0 0 0; font-family: Arial, Verdana, Sans Serif;color:#3c3c3c;">

<table width="100%" style="border-collapse: collapse;">
<tbody>
<tr>
<td width="auto"></td>
<td width="80%" class="content" style="width: 640px;">

<!-- main content table -->
<table class="main-table" style="border-collapse: collapse;">

<tr class="fw">
<td class="fw middle" valign="middle" colspan="2" style="vertical-align: middle;padding: 25px 25px 25px 25px;">
<img align="left" class="logo" src="http://meetbryce.com/client-files/mim/logo.png" alt="Make It Mine" border="0"><span class="thirty-four" style="font-size: 2em;font-weight: bold;">thank you for applying!</span><br>
<span class="red twenty" style="color: #fa696e;font-size: 1.2em;">your account number is <strong>CFA0027852</strong></span>
</td>
</tr>

<tr class="fw">
<td class="fw whitetxt" colspan="2" bgcolor="#004d7c" style="color: #ffffff;padding: 25px 25px 25px 25px;">
<span class="thirteen" style="font-size: .9em;">We appreciate your order! Please find attached the relevant paperwork for your new computer. It's in PDF format so you'll need a modern browser or Adobe Reader to open it. You will also get the paperwork via post in your letterbox, it will include a prepaid envelope for easy return to us.</span>
</td>
</tr>

<tr class="hw">
<td class="hw l" width="50%" bgcolor="#ecf4f7" align="right" style="padding: 25px 20px 25px 25px;">
Jonathan Swanston <span class="small-only" style="display: none;"><br></span><span class="blue" style="color: #0085c1;">is my name</span><br><br>
jswanston@gmail.com <span class="small-only" style="display: none;"><br></span><span class="blue" style="color: #0085c1;">is my email</span><br><br>
0425-353-217 <span class="small-only" style="display: none;"><br></span><span class="blue" style="color: #0085c1;">is my phone</span>
</td>
<td class="hw r" width="50%" bgcolor="#ecf4f7" style="padding: 25px 25px 25px 20px;">
<span class="blue" style="color: #0085c1;">my sex is</span><span class="small-only" style="display: none;"><br></span> Male<br><br>
<span class="blue" style="color: #0085c1;">my birthday is</span> <span class="small-only" style="display: none;"><br></span>4th November, 1988<br><br>
<span class="blue" style="color: #0085c1;">my benefit is</span> <span class="small-only" style="display: none;"><br></span>111-555-666-1
</td>

</tr><tr class="null" style="padding: 0px 0px 0px 0px;">
<td class="null" colspan="2" bgcolor="#ecf4f7" align="center" style="padding: 0px 0px 0px 0px;">
<img src="http://meetbryce.com/client-files/mim/divider.png" width="100%" height="auto" alt="&nbsp;" border="0">
</td>
</tr>

<tr>
<td class="hw l" width="50%" bgcolor="#ecf4f7" align="right" style="padding: 25px 20px 25px 25px;">
<span class="blue" style="color: #0085c1;">my home address</span><br><br>
Unit 2A<br>
6 Carnarvon Road<br>
Caulfield North<br>
Victoria 3161
</td>
<td class="hw r" width="50%" bgcolor="#ecf4f7" style="padding: 25px 25px 25px 20px;">
<span class="blue" style="color: #0085c1;">my delivery address</span><br><br>
Unit 2A<br>
6 Carnarvon Road<br>
Caulfield North<br>
Victoria 3161
</td>
</tr>

<tr class="fw">
<td class="fw whitetxt" colspan="2" bgcolor="#0085c1" align="center" style="color: #ffffff;padding: 25px 25px 25px 25px;">
<span class="h1" style="font-size: 2em;font-weight: bold;">what you've applied for... nice!</span>
</td>
</tr>

<tr class="null" style="padding: 0px 0px 0px 0px;">
<td class="null bottom-border" colspan="2" style="padding: 0px 0px 0px 0px;border-bottom: 2px solid #f1f1f0;">
<a href="#" target="_blank"><img src="http://meetbryce.com/client-files/mim/ipad.png" width="100%" height="auto" alt="apple ipad 3 - 3G/WiFi 16gb - $30/week - $120/month - all together $1,560" border="0"></a>
</td>
</tr>

<tr class="fw">
<td class="fw bottom-border" colspan="2" style="border-bottom: 2px solid #f1f1f0;padding: 25px 25px 25px 25px;">
<span class="h2" style="font-size: 1.4em;font-weight: bold;">Step 1. Set up your Centrelink deduction by:</span>
<br><br>
<span class="blue" style="color: #0085c1;">Logging into your Centrelink account online at http://www.centrelink.gov.au</span>
<ul>
    <li>Select ‘Deductions’, ‘add new deduction’ then click ‘Start’</li>
    <li>Enter the service providers CRN “555074568C”</li>
    <li>    Select service category ‘Food Clothing and Household Items’ and click continue</li>
    <li>Select ‘MAKE IT MINE / COMPUTERS FOR ALL’ and click continue</li>
    <li>Use the purchase details above to complete the deduction amount (fortnightly amount), frequency, start date (ASAP) and target amount.</li>
    <li>Confirm that all details are correct!</li>
</ul>
<span class="blue" style="color: #0085c1;">Or call Centrelink on 13 61 50</span>
<ul>
    <li>Let the Centrelink employee know that you wish to start payments into the "Make It Mine / Computers For All account" account.</li>
    <li>You will need to quote our Centrelink Reference Number: “555074568C”</li>
    <li>Provide the purchase details above to the Centrelink employee</li>
</ul>
<span class="blue" style="color: #0085c1;">Or visit a Centrelink outlet</span>
</td>
</tr>

<tr class="fw">
<td class="fw bottom-border" colspan="2" style="border-bottom: 2px solid #f1f1f0;padding: 25px 25px 25px 25px;">
<span class="h2" style="font-size: 1.4em;font-weight: bold;">Fast track your application</span>
<br><br>
You can fast track your application by setting up your Centrelink deductions online and emailing or faxing your signed paperwork to us! 
<br><br>
<span class="blue sixteen" style="color: #0085c1;font-size: 1.1em;">Fast tracked applications can be approved within days and the package dispatched on approval!</span>
<br><br>
An additional copy of your paperwork will also be sent to your postal address. Once your paperwork is returned, and payments have been confirmed your order will move to the final stages of processing. Most orders ship directly through the manufacturer. Processing takes up to two working days after your account is approved for dispatch. After this point, please allow up to 8-10 working days for your order to be delivered. We will email and SMS you at every stage of the order progression.
</td>
</tr>

<tr class="fw">
<td class="fw" colspan="2" style="padding: 25px 25px 25px 25px;">
<span class="h2" style="font-size: 1.4em;font-weight: bold;">Download your application receipt</span>
<br><img src="http://meetbryce.com/client-files/mim/pdf.png" alt="&nbsp;" align="left" border="0">
<span class="red strong" style="color: #fa696e;font-weight: bold;">contract-ord587fd27-1695-4a7e-8562-873ce4f087b6.pdf</span><br>
<strong>1206k</strong> <a href="#" target="_blank">View</a> <a href="#" target="_blank">Download</a>
</td>
</tr>

<tr class="hw">
<td class="fw" bgcolor="#f1f1f0" style="padding: 25px 25px 25px 25px;">
<img src="http://meetbryce.com/client-files/mim/footer-logo.png" alt="Make it Mine copyright &copy; 2012 make it mine.&lt;br&gt;all rights reserved" align="left" border="0">
</td>
<td class="fw" bgcolor="#f1f1f0" style="padding: 25px 25px 25px 25px;">
<a href="#"><img src="http://meetbryce.com/client-files/mim/footer-facebook.png" alt="We like you… do you like us?" border="0"></a>
</td>
</tr>

</table>
<!-- end main content table -->
</td>
<td width="auto"></td>
</tr>
</tbody>
</table>

</body>

字体大小拒绝在iPhone电子邮件上更改

1 个答案: