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 に答える