Abe*_*sty 12 html mobile gmail android responsive-design
我正在制作一个电子邮件,可以在浏览器和移动平台上查看,而且大多数情况都很顺利.它使用内联样式等在表格中进行了布局.然而,尽管媒体查询最大宽度为600px,但至少在我和其他一个我可以访问的Android上的Gmail应用程序选择调整图像大小和布局适合它的区域,而不是使用媒体查询或让它适合自己适合窗口,其中任何一个都可以.
为了个人使用,我可以在手机上"关闭自动调整大小",然后电子邮件就像在浏览器中一样.
有没有办法告诉Gmail应用不要自动调整电子邮件大小或使用媒体查询？
小智 13
谷歌自己(原文如此!)在这里你应该在你的<body>标签后面的模板上添加一个小黑客:
<!-- Gmail hack -->
<div style="display:none; white-space:nowrap; font:15px courier; color:#ffffff; line-height:0; width:600px !important; min-width:600px !important; max-width:600px !important;"> </div>
<!-- /Gmail hack -->
由于Gmail和Inbox会忽略display:none,因此黑客只会影响这两个客户端.
zaz*_*eph 12
<meta name="viewport" content="width=device-width, initial-scale=1"/>
然后style在图像(1px gif works)上设置属性,该图像跨越页面的整个宽度(style="min-width:600px;").一切都将正确布局,并且可以滚动.
Gmail一般不支持媒体查询或一般的样式标记,这就是为什么我们必须内联移动所有内容.
小智 9
受css-tricks.com 的启发，这段代码解决了我的问题。把它放在前面</body>。
<table class="gmail-app-fix">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" align="center" width="600">
<tr>
<td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 200px;">
<img src="transparent.gif" width="200" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 200px; width: 200px;"/>
</td>
<td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 200px;">
<img src="transparent.gif" width="200" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 200px; width: 200px;"/>
</td>
<td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 200px;">
<img src="transparent.gif" width="200" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 200px; width: 200px;"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
（在 Android 5.0.1 上使用 Gmail 6.0 和 Inbox 1.20 进行测试，分辨率为 720x1280（适用于纵向和横向））。
| 归档时间： |
|
| 查看次数： |
14260 次 |
| 最近记录： |