font-size email 手机太小
[英]font-size email mobile is too small
问题描述
I set the font to 15px but when viewing the email on a mobile device (specifically mail > gmail) the text appears much smaller.
我将字体设置为 15px，但在移动设备（特别是邮件 > gmail）上查看 email 时，文本显得小得多。 How do I increase the size for mobile without increasing the size for desktop, I hear gmail strips media queries.如何在不增加桌面大小的情况下增加移动设备的大小，我听到 gmail 剥离媒体查询。
<table> <tr> <td style="font-size: 15px;"><p style="font-size: 15px;">Some text</p></td> </tr> </table>
Any ideas?有任何想法吗？
4 个解决方案
解决方案1
2 2017-04-06 12:10:14
You can change the font-size on mobile using a media-query like you would on the web.您可以像在网络上一样使用media-query在移动设备上更改font-size 。 Many mobile clients support media queries now, including most of gmail .许多移动客户端现在支持媒体查询，包括大部分gmail 。
.mobile-p { font-size: 18px !important; /* override inline style */ }
<table> <tr> <td> <p style="font-size: 15px;" class="mobile-p">Some text</p> </td> </tr> </table>
Additionally iOS Mail sometimes auto-formats text.此外，iOS 邮件有时会自动格式化文本。 Disable auto-scale in iOS 10 Mail entirely using this <meta> tag in the <head> :使用<head>中的这个<meta>标签完全禁用 iOS 10 Mail 中的自动缩放：
<meta name="x-apple-disable-message-reformatting">
解决方案2
2 2019-11-18 05:19:06
Most likely what is happening is that Gmail is picking up on an image or other element that is not responsive (eg set to width="600" , but not with the additional responsive code, style="width:100%;height:auto;max-width:600px;" ).最有可能发生的事情是 Gmail 正在接收一个没有响应的图像或其他元素（例如设置为width="600" ，但没有使用额外的响应代码style="width:100%;height:auto;max-width:600px;" )。
In this case, you need to fix up the unresponsive elements, and then Gmail won't feel the need to resize your text.在这种情况下，您需要修复无响应的元素，这样 Gmail 就不会觉得需要调整文本大小了。
Gmail will now accept media queries, so you can setup the following in the <head> section: Gmail 现在将接受媒体查询，因此您可以在<head>部分设置以下内容：
<style type="text/css">
@media screen and (max-width: 620px) {
...
}
</style>
Having said that, Gmail behaves differently if you are not using their native email, but your own domain (the term: GANGA).话虽如此，如果您使用的不是他们的本地电子邮件，而是您自己的域（术语：甘加），Gmail 的行为会有所不同。 The key here is that customers with these types of Gmail emails will have the @media query stripped (and all embedded CSS).这里的关键是使用这些类型的 Gmail 电子邮件的客户将删除@media查询（以及所有嵌入的 CSS）。
Also Gmail will strip out the entire <style>...</style> section if you have invalid code in there, or code it doesn't accept such as the attribute selector, eg img[class="header"] ( from Email on Acid )也Gmail将去掉整个<style>...</style>部分，如果你有在那里无效代码或代码不作为属性选择器，例如接受这样img[class="header"] 从关于酸的电子邮件）
Nevertheless even for GANGA type Gmail users it is certainly possible to render perfectly legible text (ie have responsive emails).尽管如此，即使对于 GAGA 类型的 Gmail 用户，也肯定可以呈现完全清晰的文本（即具有响应式电子邮件）。 Use the 'hybrid' method if you have complex 2 or 3 column emails - otherwise, check your images, or really long URLs (break up URLs with <wbr> ).如果您有复杂的 2 或 3 列电子邮件，请使用“混合”方法 - 否则，请检查您的图像或非常长的 URL（用<wbr>拆分 URL）。
解决方案3
0 2017-04-04 18:56:51
The simplest thing I can think of would be to use viewport units.我能想到的最简单的事情是使用视口单位。 Namely these:即这些：
vw: 1/100th viewport width vh: 1/100th viewport height vmin: 1/100th of the smallest side vmax: 1/100th of the largest side vw：1/100 视口宽度 vh：1/100 视口高度 vmin：最小边的 1/100 vmax：最大边的 1/100
Set your font-size attribute to some scalar*vmax for instance and adjust from there.例如，将您的 font-size 属性设置为一些标量 * vmax 并从那里进行调整。
解决方案4
0 2021-09-27 00:29:14
I had the same issue.我遇到过同样的问题。 For me, changing container CSS from:对我来说，从以下位置更改容器 CSS：
width: 600px;
max-width: 100%;
To:到：
width: 100%;
max-width: 600px;
Solved the issue.解决了这个问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.