个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
因此，我正在努力为我的公司构建一些用于电子邮件广播的新模板，但在使用移动电子邮件客户端时遇到了一些麻烦。具体来说，我的文本在 Android 和 iOS 中变得太小了。
现在，如果需要，我可以只使用我的媒体查询来定位 iOS 并调整我认为合适的字体大小，但据我所知，这对于 Android 是不可能的，给我留下了非常小的文本。
我的代码在下面，我遇到问题的主要部分是 bodyleft 单元格，其中字体大小是标准的 16 像素，除了移动设备外，其他地方看起来都很好。 -webkit-文本大小调整:无；没有使用，因为我确实希望调整尺寸，而且在这种情况下它也没有什么不同。
非常感谢任何帮助，谢谢!
<style type="text/css">
td img {
display: block;
}
.ExternalClass * {
line-height: 100%;
}
@media screen and (max-width: 600px) {
body[yahoo] .border {
width:98% !important;
min-width:auto !important;
}
body[yahoo] .main {
width:100% !important;
}
body[yahoo] .body {
width:90% !important;
}
body[yahoo] .spacer {
display: none !important;
}
body[yahoo] .footer {
width:90% !important;
}
body[yahoo] .bodyleft {
float: left;
margin-bottom: 20px;
}
body[yahoo] .bodyright {
float: left;
width:100% !important;
}
body[yahoo] img {
height: auto !important;
}
body[yahoo] .sideimagesa {
float:left;
width:48% !important;
margin-bottom:10px !important;
}
body[yahoo] .sideimagesb {
float:right;
width:48% !important;
margin-bottom:10px !important;
}
}
</style>
</head>
<body yahoo="fix" style="margin:0px;" bgcolor="#EF9A9A">
<div>
<table style="border-collapse:collapse;" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#EF9A9A" style="padding-top:20px; padding-bottom:20px;"><table class="border" style="width:660px; min-width:660px; margin:auto; border-collapse:collapse;" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td bgcolor="#F44336">
<table class="main" style="width:650px; border-collapse:collapse;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#FFFFFF">
<table class="main" style="width:650px; border-collapse:collapse;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="header" style="font-family:Arial, Helvetica, sans-serif;" align="center"><img style="display:block" src="http://images.theonlineimages.com/ima/650x200.jpg" alt="" width="100%" /></td>
</tr>
<tr>
<td class="headline" style="padding-top:15px; padding-bottom:15px;" align="center" bgcolor="#F44336"><strong><a style="font-family:Arial, Helvetica, sans-serif; font-size:24px; color:#ffffff; text-decoration:none;" href="http://en.wikipedia.org">This Can Be Your First Call to Action Link</a></strong></td>
</tr>
<tr>
<td style="padding-top:20px;">
<table class="body" style="width:625px; margin:auto; border-collapse:collapse;" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="bodyleft" style="font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#212121; line-height:22px;" valign="top">Any text you want to include to explain what you are offering would be placed here. This includes any and all incentives. The text can be <strong>bolded</strong> or <em>italicized</em> for emphasis. Individual segments of text can also have their sizes and colors changed in order to add emphasis that way.<br />
<br />
<strong><span style="color:#B71C1C">Header Text</span></strong> <br />
<br />
You can use headers to separate your ideas, and have <a style="color:#B71C1C" href="#">hyperlinks</a> throughout your text. Pictures on the right side can be used to show off what you are advertising. Greater or fewer images can be included, and they can be switched to the left side if preferred. Images will be entered at the exact widths shown, but heights can vary without issue.
<br />
<ul style="margin-top:19px;margin-bottom:19px;">
<li>A bullleted or numbered list</li>
<li>can be used</li>
<li>to itemize your text</li>
</ul>
All colors are completely up to you. This includes links, text, borders and backgrounds. Each of these can be changed to whatever color you like.<br />
<br />
<table style="border-collapse:collapse;" class="cta" width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td align="center" bgcolor="#F44336"><a style="font-family:Arial, Helvetica, sans-serif; font-size:36px; color:#ffffff; text-decoration:none; line-height:42px;" href="http://en.wikipedia.org"><strong>Press Here if You Want to
Learn More</strong></a></td>
</tr>
</table></td>
<td class="spacer" style="width:20px;"> </td>
<td class="bodyright" style="width:210px;" valign="top"><table class="sideimagesa" border="0" cellpadding="5" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td bgcolor="#F44336"><table style="width:100%; border-collapse:collapse;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="font-family:Arial, Helvetica, sans-serif;"><span class="header" style="font-family:Arial, Helvetica, sans-serif;"><img style="display:block" src="http://images.theonlineimages.com/ima/200x125.jpg" alt="" width="100%" /></span></td>
</tr>
</table></td>
</tr>
</table>
<table class="spacer" border="0" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td height="20"> </td>
</tr>
</table>
<table class="sideimagesb" border="0" cellpadding="5" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td bgcolor="#F44336"><table style="width:100%; border-collapse:collapse;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" bgcolor="#BDBDBD" style="font-family:Arial, Helvetica, sans-serif;"><span class="header" style="font-family:Arial, Helvetica, sans-serif;"><img style="display:block" src="http://images.theonlineimages.com/ima/200x125.jpg" alt="" width="100%" /></span></td>
</tr>
</table></td>
</tr>
</table>
<table class="spacer" border="0" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td height="20"> </td>
</tr>
</table>
<table class="sideimagesa" border="0" cellpadding="5" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td bgcolor="#F44336"><table style="width:100%; border-collapse:collapse;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" bgcolor="#BDBDBD" style="font-family:Arial, Helvetica, sans-serif;"><span class="header" style="font-family:Arial, Helvetica, sans-serif;"><img style="display:block" src="http://images.theonlineimages.com/ima/200x125.jpg" alt="" width="100%" /></span></td>
</tr>
</table></td>
</tr>
</table>
<table class="spacer" border="0" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td height="20"> </td>
</tr>
</table>
<table class="sideimagesb" border="0" cellpadding="5" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td bgcolor="#F44336"><table style="width:100%; border-collapse:collapse;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" bgcolor="#BDBDBD" style="font-family:Arial, Helvetica, sans-serif;"><span class="header" style="font-family:Arial, Helvetica, sans-serif;"><img style="display:block" src="http://images.theonlineimages.com/ima/200x125.jpg" alt="" width="100%" /></span></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td style="padding-top:20px; padding-bottom:20px;"><table class="footer" style="width:625px; margin:auto; border-collapse:collapse;" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#212121" align="center">You can put disclaimers, contact info, or any other footer information you might want to include here</td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>
最佳答案
您遇到的 Gmail 问题与您的字体大小或字体声明类型无关。事实上，使用 EM 或前面答案中所示的关键字可能会破坏您的设计/布局，因为它们在客户端之间不一致(默认大小不同 - 请在此处查看支持答案:In email templates, should font-size be in pt or px?)。
问题是您声明的宽度为 660px，这比手机宽得多，因此为了使其适合屏幕并且不需要水平滚动，它会“缩小”电子邮件，缩小所有电子邮件中的元素。 Gmail 忽略样式表中列出的所有内容，这意味着所有媒体查询都变得无用。
为防止这种情况，您应该在移动优先环境中使用百分比进行设计，然后使用媒体查询等设置样式以适应桌面。
此类电子邮件的良好资源:http://labs.actionrocket.co/the-hybrid-coding-approach-2
关于可接受的 CSS 的好资源:https://www.campaignmonitor.com/css
示例代码的Codepen:http://codepen.io/actionrocket/pen/EoCLH
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ededed">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style=" display:block; max-width:640px !important;" bgcolor="#ffffff">
<tr>
<td>
<table id="holder" class="wrapper" border="0" cellspacing="0" cellpadding="0" style="width:100%; max-width:640px !important;" align="center">
<tr><td align="center">
<!--[if mso]>
<table id="outlookholder" border="0" cellspacing="0" cellpadding="0" align="center"><tr><td>
<![endif]-->
<!--[if (IE)]>
<table border="0" cellspacing="0" cellpadding="0" width="640" align="center"><tr><td>
<![endif]-->
<!--2 column-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="320" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td width="20"></td>
<td width="280" bgcolor="#ededed">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><img style="display:block" border="0" src="http://placehold.it/100x100" width="100" height="100" alt=""/></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="2%"></td>
<td style="font-family:arial, Helvetica, sans-serif; font-size:22px; line-height:26px; color:#454545; text-align:center;">Module title goes here</td>
<td width="2%"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="2%"></td>
<td style="font-family:arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#454545; text-align:center;">Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.</td>
<td width="2%"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table width="160" border="0" cellspacing="0" cellpadding="0" class="w300" bgcolor="#a3a3a3">
<tr>
<td width="15"></td>
<td style="font-family:arial, Helvetica, sans-serif; font-size:16px; line-height:20px; color:#ffffff; text-align:center;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="10"></td>
</tr>
</table>
<a style="color:#FFFFFF; text-decoration:none;" href="#" target="_blank">Call to Action</a>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="10"></td>
</tr>
</table>
</td>
<td width="15"></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20" bgcolor="#ffffff"></td>
</tr>
</table>
</td>
<td width="20"></td>
</tr>
</table>
<!--[if mso]></td><td><![endif]-->
<table width="320" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td width="20"></td>
<td width="280" bgcolor="#ededed">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><img style="display:block" border="0" src="http://placehold.it/100x100" width="100" height="100" alt=""/></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="2%"></td>
<td style="font-family:arial, Helvetica, sans-serif; font-size:22px; line-height:26px; color:#454545; text-align:center;">Module title goes here</td>
<td width="2%"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="2%"></td>
<td style="font-family:arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#454545; text-align:center;">Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.</td>
<td width="2%"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table width="160" border="0" cellspacing="0" cellpadding="0" class="w300" bgcolor="#a3a3a3">
<tr>
<td width="15"></td>
<td style="font-family:arial, Helvetica, sans-serif; font-size:16px; line-height:20px; color:#ffffff; text-align:center;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="10"></td>
</tr>
</table>
<a style="color:#FFFFFF; text-decoration:none;" href="#" target="_blank">Call to Action</a>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="10"></td>
</tr>
</table>
</td>
<td width="15"></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
</td>
<td width="20"></td>
</tr>
</table>
</td>
</tr>
</table>
</td></tr></table>
<!--[if mso]>
</td></tr></table>
<![endif]-->
<!--[if IE]>
</td></tr></table>
<![endif]-->
</td></tr></table>
</td></tr></table>
关于android - Android 上的 Gmail/iOS 上的默认邮件应用缩小文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34189129/
25
4
0
IO 设备如何知道属于它的内存中的值在memory mapped IO 中发生了变化？ ？ 例如，假设内存地址 0 专用于保存 VGA 设备的背景颜色。当我们更改 memory[0] 中的值时，VGA
我目前正在开发一个使用Facebook sdk登录(通过FBLoginView)的iOS应用。 一切正常，除了那些拥有较旧版本的facebook的人。 当他们按下“使用Facebook登录”按钮时，他
假设我有: this - is an - example - with some - dashesNSRange将使用`rangeOfString:@“-”拾取“-”的第一个实例，但是如果我只想要最后
Card.io SDK提供以下详细信息: 卡号，有效期，月份，年份，CVV和邮政编码。 如何从此SDK获取国家名称。 - (void)userDidProvideCreditCardInfo:(Car
iOS 应用程序如何从网络服务下载图片并在安装过程中将它们安装到用户的 iOS 设备上？可能吗？ 最佳答案 您无法控制应用在用户设备上的安装，因此无法在安装过程中下载其他数据。 只需在安装后首次启动应
我曾经开发过一款企业版 iOS 产品，我们公司曾将其出售给大型企业，供他们的员工使用。 该应用程序通过 AppStore 提供，企业用户获得了公司特定的配置文件(包含应用程序配置文件)以启用他们有权使
我正在尝试将 Card.io SDK 集成到我的 iOS 应用程序中。我想为 CardIO ui 做一个简单的本地化，如更改取消按钮标题或“在此保留信用卡”提示文本。 我在 github 上找到了这个
我正在使用 CardIOView 和 CardIOViewDelegate 类，没有可以设置为 YES 的 BOOL 来扫描 collectCardholderName。我可以看到它在 CardIOP
我有一个集成了通话工具包的 voip 应用程序。每次我从我的 voip 应用程序调用时，都会在 native 电话应用程序中创建一个新的最近通话记录。我在 voip 应用程序中也有自定义联系人(电话应
iOS 应用程序如何知道应用程序打开时屏幕上是否已经有键盘？应用程序运行后，它可以接收键盘显示/隐藏通知。但是，如果应用程序在分屏模式下作为辅助应用程序打开，而主应用程序已经显示键盘，则辅助应用程序不
我在模拟器中收到以下错误: ImageIO: CGImageReadSessionGetCachedImageBlockData *** CGImageReadSessionGetCachedIm
如 Apple 文档所示，可以通过 EAAccessory Framework 与经过认证的配件(由 Apple 认证)进行通信。但是我有点困惑，因为一些帖子告诉我它也可以通过 CoreBluetoo
尽管现在的调试器已经很不错了，但有时找出应用程序中正在发生的事情的最好方法仍然是古老的 NSLog。当您连接到计算机时，这样做很容易； Xcode 会帮助弹出日志查看器面板，然后就可以了。当您不在办公
在我的 iOS 应用程序中，我定义了一些兴趣点。其中一些有一个 Kontakt.io 信标的名称，它绑定(bind)到一个特定的 PoI(我的意思是通常贴在信标标签上的名称)。现在我想在附近发现信标，
我正在为警报提示创建一个 trigger.io 插件。尝试从警报提示返回数据。这是我的代码: // Prompt + (void)show_prompt:(ForgeTask*)task{
您好，我是 Apple iOS 的新手。我阅读并搜索了很多关于推送通知的文章，但我没有发现任何关于 APNS 从 io4 到 ios 6 的新更新的信息。任何人都可以向我提供 APNS 如何在 ios
UITabBar 的高度似乎在 iOS 7 和 8/9/10/11 之间发生了变化。我发布这个问题是为了让其他人轻松找到答案。 那么:在 iPhone 和 iPad 上的 iOS 8/9/10/11
我想我可以针对不同的 iOS 版本使用不同的 Storyboard。 由于 UI 的差异，我将创建下一个 Storyboard: Main_iPhone.storyboard Main_iPad.st
我正在写一些东西，我将使用设备的 iTunes 库中的一部分音轨来覆盖 2 个视频的组合，例如: AVMutableComposition* mixComposition = [[AVMutableC
我创建了一个简单的 iOS 程序，可以顺利编译并在 iPad 模拟器上运行良好。当我告诉 XCode 4 使用我连接的 iPad 设备时，无法编译相同的程序。问题似乎是当我尝试使用附加的 iPad 时
我是一名优秀的程序员,十分优秀！