2

我在这个 HTML 电子邮件模板上花了大约 4 个小时,无论我改变什么字体都拒绝在 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’&lt;/li>
    <li>Enter the service providers CRN “555074568C”&lt;/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”&lt;/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>

4

1 回答 1

3

更改字体大小的单位可以解决问题。

我将所有伪标题的单位更改为 >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;}
}

现在看起来像这样:

截屏

如果你对完整的代码感兴趣——这里是:

<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’&lt;/li>
    <li>Enter the service providers CRN “555074568C”&lt;/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”&lt;/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>
于 2012-09-08T04:37:30.063 回答