Question

无论出于何种原因，我的文字大小调整不适用于iPhone，在Android上以及其他电子邮件格式正常工作。似乎看不到两个文件之间的任何差异。图像也调整大小，似乎只是文本的问题。

<head>

<style type="text/css">
    /* Outlook link fix */
    #outlook a {padding:0;}
    /* Hotmail background & line height fixes */
    .ExternalClass {width:100% !important;}
    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font,
    .ExternalClass td, .ExternalClass div {line-height: 100%;}
    /* Image borders & formatting */
    img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;} 
    a img {border:none;} 
    /* Re-style iPhone automatic links (eg. phone numbers) */
    .applelinks a {color:#222222; text-decoration: none;}
    /* Hotmail symbol fix for mobile devices */
    .ExternalClass img[class^=Emoji] { width: 10px !important; height: 10px !important; display: inline !important; } 


    /* Media Query for mobile */

    @media screen and (max-width: 480px) {  

    /* This resizes tables and images to be 100% wide with a proportionate width */
    table[class=emailwrapto100pc], img[class=emailwrapto100pc]{width:100% !important; height:auto !important;}

    /* Hide stuff on mobiles */
    table[class=emailnomob],td[class=emailnomob],img[class=emailnomob],span[class=emailnomob]{display:none !important;}

    td[class=emailcolsplit]{width:100%!important; float:left!important;}

    a[class=emailmobbutton]{display:block !important;font-size:14px !important; font-weight:bold !important; padding:6px 4px 8px 4px !important; line-height:18px !important; background:#dddddd !important; margin:10px auto;width:100%; text-align:center; color:#111 !important; text-decoration:none; text-shadow:#fff 1px 0 0 ;}

    /* This resizes body text for mobiles */
    span[class=emailbodytext],a[class=emailbodytext]{font-size:16px !important; line-height:21px !important;}
    }

    @media screen and (min-width:1024px) {
    a[class=emailmobbutton]{display: none !important;}
    span[class=emailmobbutton]{display: none !important;}
    }

                    <table style="padding-top:20px;" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td>
                            <a href="" target="_blank">
                            <img height="216" width="216" border="0" src="" style="display: block;" class="emailwrapto100pc" />
                            </a>
                        </td>
                    </tr>
                    <tr>    
                        <td align="center" style="padding-top:10px;padding-left:10px;padding-right:10px;">
                            <a href="" style="text-decoration: none; color: #111111">               
                            <span class="emailbodytext" style="font-size:12px; font-family:tahoma, sans-serif; line-height:20px; color:#333333;">Hugo Boss Black</span>
                        </a>
                        </td>
                    </tr>
                    <tr>
                        <td width="33%" align="center" style="padding-top:5px;padding-bottom:10px;padding-left:10px;padding-right:10px;">
                            <a href="" style="text-decoration: none; color: #111111">
                            <span class="emailbodytext" style="font-size:12px; font-family:tahoma, sans-serif; line-height:20px; color:#333333;">Bugnara Polo T-Shirt</span>
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td align="center" width="33%">
                        <a style="text-decoration:none;background-color:#000000; color:#ffffff; padding:5px 20px; font-family:tahoma, sans-serif;font-size:12px;line-height:20px;" href="">
                            SHOP NOW</a>
                        </td>
                    </tr>
                </table>

非常感谢任何帮助。

Answer 1

我遇到了一个问题，我正在与不允许修改的电子邮件提供商合作 <head> 部分和我的 <style> @media ...</style>代码不起作用。

通过电子邮件，我们必须回想起而不是及时转发。尝试将媒体查询编写为单独的块部分。我试过这种方法＆amp;它在Android上毫无障碍地工作，前一种方法失败了。

`<style type="text/css">
/* standard styles */
</style>
<style media="screen and (max-width: 480px)">
/* responsive styles */
</style>`

希望这可以帮助你。

HTML / CSS简报，@ media查询没有调整iPhone上的文本大小

1 个答案: