gpt4 book ai didi

iphone - HTML/CSS 通讯,@media 查询不调整 iPhone 上的文本大小

转载 作者:行者123 更新时间:2023-11-28 12:59:10 27 4
gpt4 key购买 nike

无论出于何种原因,我的文本大小调整在 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>

如有任何帮助,我们将不胜感激。

最佳答案

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

对于电子邮件,我们必须及时回想而不是向前。尝试将媒体查询编写为单独的 block 部分。我已经尝试过这种方法,它在 Android 上运行顺利,而之前的方法失败了。

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

希望这对你有帮助。

关于iphone - HTML/CSS 通讯,@media 查询不调整 iPhone 上的文本大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16295625/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com