gpt4 book ai didi

android - HTML 电子邮件通讯不响应/按比例缩小以适应 Android 4.4 上的屏幕(适用于其他移动客户端)

转载 作者:行者123 更新时间:2023-11-29 20:09:57 25 4
gpt4 key购买 nike

我手写了一份电子邮件简报,除了在 Android 4.4 之外的各种电子邮件客户端中都能正常工作,在 Android 4.4 中我遇到了一个错误,内容不会缩小以适合移动屏幕。理想情况下它应该是响应式的,但如果不是简单地按比例缩小就可以了。它在其他移动浏览器中运行良好 - gmail、iOS 邮件等。

下面是来自 Litmus(电子邮件测试服务)的测试截图。我对内容进行了模糊处理,但正如您所见,只有一半内容显示出来,其余内容丢失在右侧,因为它没有按比例缩小。

来自 Litmus 的 ANDROID 4.4 屏幕截图:

Android 4.4 test

这是我正在使用的 HTML(再次删除了内容),但显示了 html 结构和 css。我还尝试添加一个元视口(viewport)标签:<meta name="viewport" content="width=device-width, initial-scale=1.0" /> ,但无济于事。有什么我可以改变的想法吗?

<head>

<style type="text/css">
@media only screen and (max-width: 480px){
.dm-user-inserted-image{
height:auto !important;
max-width:600px !important;
width: 100% !important;
}
}

@media screen and (max-width:480px) {
table {
width: 100%!important;
}

td {
width: 100%!important;
}

}


.header-logo {

}

a {
border-style: none;
}

a img {
border-style: none;
}

.heading-light {

}

.heading-bold {
font-family: Helvetica, Arial, sans-serif;
font-weight: 600;
color: #000000;
}


.horizontal-rule {
background:none;
border-top:solid 1px #CCCCCC;
border-top-width:1px 0 0 0;

border-left:none;
border-right:none;
border-bottom:none;

height:1px;
width:100%;
margin:0px 0px 0px 0px;
padding-top:10px;
padding-bottom:10px;
}


.header-message {
font-family: Helvetica-Light, "Helvetica Light", Helvetica, Arial, sans-serif;
font-size: 20px;
color: #666666;
display:block;
font-weight: 500;
text-align: center;
line-height: 30px;
}


.main-message {
font-family: Helvetica-Light, "Helvetica Light", Helvetica, Arial, sans-serif;
font-size: 14px;
color: #666666;
display:block;
text-align: center;
line-height: 1.6;
}

.link-message {
font-family: Helvetica-Light, "Helvetica Light", Helvetica, Arial, sans-serif;
font-size: 14px;
color: #666666;
display:block;
text-align: center;
line-height: 1.6;
}

.footer-details {
font-family: Helvetica-Light, "Helvetica Light", Helvetica, Arial, sans-serif;
font-size: 12px;
color: #666666;
display:block;
text-align: center;
line-height: 18px;
}

.footer-unsub {
font-family: Helvetica-Light, "Helvetica Light", Helvetica, Arial, sans-serif;
font-size: 12px;
color: #666666;
display:block;
text-align: center;
line-height: 18px;
}
</style>

</head>




<body style="text-align:center;" >


<center style="max-width:600px;display:inline-block;" >


<table cellpadding="0" cellspacing="0" width="100%" id="responsive-table">


<tbody>


<tr height="30" width="100%">&nbsp;</tr>


<tr align="center">
<td class="header-logo">
<a href="" border="0" style="border-style:none;" >
<img width="65" style="border-style:none;" />
</a>
</td>
</tr>


<tr height="50" width="100%" class="bottom-border">&nbsp;</tr>




<tr align="center">
<!--[if gte mso 12]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->


<td class="horizontal-rule" style="background-color:transparent;background-image:none;background-repeat:repeat;background-position:top left;background-attachment:scroll;border-width:1px 0 0 0;border-style:solid;border-color:#CCCCCC;height:1px;width:100%;margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;padding-top:10px;padding-bottom:10px;border-top-width:1px 0 0 0;border-top-style:solid;border-top-color:#CCCCCC;border-left-style:none;border-right-style:none;border-bottom-style:none;" >
&nbsp;
</td>


<!--[if gte mso 12]>
</td>
</tr>
</table>
<![endif]-->
</tr>






<tr height="10" width="100%" class="bottom-border">&nbsp;</tr>


<!--[if gte mso 12]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->


<tr align="center">
<td class="header-message" style="font-family:Helvetica-Light, Helvetica, Arial, sans-serif;font-size:20px;color:#666666;display:block;font-weight:500;text-align:center;line-height:30px;" >

<span class="heading-light">TEXT CONTENT<br></span>
<span class="heading-bold" style="font-family:Helvetica, Arial, sans-serif;font-weight:600;color:#000000;" >"Best Interior TEXT CONTENT</span>

</td>
</tr>


<tr height="30" width="100%">&nbsp;</tr>


<tr align="center">
<td class="main-message" style="font-family:Helvetica-Light, Helvetica, Arial, sans-serif;font-size:14px;color:#666666;display:block;text-align:center;line-height:1.6;" >
TEXT CONTENT
</td>
</tr>



<tr height="20" width="100%">&nbsp;</tr>



<tr align="center">
<td class="main-message" style="font-family:Helvetica-Light, Helvetica, Arial, sans-serif;font-size:14px;color:#666666;display:block;text-align:center;line-height:1.6;" >
TEXT CONTENT
</td>
</tr>

<!--[if gte mso 12]>
</td>
</tr>
</table>
<![endif]-->




<tr height="20" width="100%">&nbsp;</tr>


<tr align="center">
<td class="link-message" style="font-family:Helvetica-Light, Helvetica, Arial, sans-serif;font-size:14px;color:#666666;display:block;text-align:center;line-height:1.6;" >
<a href=""></a>
</td>
</tr>



<tr height="30" width="100%">&nbsp;</tr>



<tr align="center">
<td class="photo">
<a href="" border="0" style="border-style:none;" >
<img width="600" style="border-style:none;" />
</a>
</td>
</tr>



<tr height="18" width="100%">&nbsp;</tr>



<tr align="center">
<td class="photo">
<a href="" border="0" style="border-style:none;" >
<img width="600" style="border-style:none;" />
</a>
</td>
</tr>



<tr height="18" width="100%">&nbsp;</tr>



<tr align="center">
<td class="photo">
<a href="" border="0" style="border-style:none;" >
<img width="600" style="border-style:none;" />
</a>
</td>
</tr>



<tr height="18" width="100%">&nbsp;</tr>


<tr align="center">
<td class="photo">
<a href="" border="0" style="border-style:none;" >
<img width="600" style="border-style:none;" />
</a>
</td>
</tr>



<tr height="18" width="100%">&nbsp;</tr>


<tr align="center">
<td class="footer-details" style="font-family:Helvetica-Light, Helvetica, Arial, sans-serif;font-size:12px;color:#666666;display:block;text-align:center;line-height:18px;" >
FOOTER CONTENT
</td>
</tr>


</tbody>

</table>


</center>



</body>

最佳答案

你需要添加到@media screen and (max-width:480px)

img{
max-width:100% !important;
height:auto;
display:block;
}

因为你也需要让图片响应

关于android - HTML 电子邮件通讯不响应/按比例缩小以适应 Android 4.4 上的屏幕(适用于其他移动客户端),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35153662/

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