为什么 iPhone 邮件中的字体大小如此之小?必须放大到 26px [英] Why font-size in iPhone mail so tiny? Had to scale up to 26px

问题描述

我正在为我的雇主设计一个响应式电子邮件模板.对于桌面大小，我可以将默认字体大小保留为 16px，并根据需要使用 rem 调整大小.它在桌面和 Gmail 中看起来都不错，并且完全响应.但是，在 iPhone 上的邮件中查看时，字体太小了.我必须添加一个媒体查询，将基本字体大小增加到 26 像素，以便在电子邮件中获得合理的字体大小.我试过做一些研究，但似乎其他人不必做同样的事情.代码中的 CSS 很少，但这是我所拥有的:

I'm working on a responsive email template for my employer. For the desktop size, I was able to leave the default font size at 16px and just use rem to adjust sizes as necessary. It looks fine on the desktop, in Gmail, and is fully responsive. However, when viewed in Mail on iPhone, the font is SO SMALL. I had to add a media query that increases the base font size to 26px to get reasonable font sizes in the email. I've tried doing some research, but it doesn't seem as if other people have had to do the same. There is very little CSS in the code, but here is what I have:

body, table, td, a, p, span {-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} 

@media screen and (max-width: 600px) {

    html, td {
        font-size: 26px !important;
        line-height: 1.3;
    }
}

我也有

<meta name="viewport" content="width=device-width, initial-scale=1">

还有一些其他 CSS 与调整图像大小、边距等有关，但这是唯一处理字体大小的 CSS(所有 rem 信息都是内联的，因此它不会被 Bronto/Gmail 剥离).如果我在浏览器中将其调整为移动尺寸，文本看起来很大，但在我的 iPhone 上查看时，它看起来很棒.我担心这可能是 iPhone 的一个怪癖，而且它在其他类型的设备上看起来会很大.有没有人有任何见解?

There is some other CSS having to do with resizing images, with margins, etc. but that is the only CSS dealing with font-sizes (all the rem info is inline so it isn't stripped out by Bronto/Gmail). If I resize it in the browser to a mobile size, the text looks massive, but when viewed on my iPhone, it looks great. I'm concerned that this may be an iPhone quirk though and that it will look massive on other types of devices. Does anyone have any insight?

推荐答案

好吧，终于想通了.幸运的是，我一直在经历并让我们所有的电子邮件模板都具有响应性，其中一个没有英雄形象.你猜怎么着?无图像模板的字体大小在移动设备上看起来很大！所以经过一些实验，我发现

Okay, finally figured it out. Luckily I had been going through and making all our email templates responsive, and one of them didn't have a hero image. Guess what? The font size looked massive on mobile for the imageless-template! So after some experimentation, I found that

img {
    width: 100% !important;
}

完全解决了这个问题，现在实际的字体大小与 CSS 中设置的匹配.尽管在图像本身及其父容器上设置了所有 width:100% 样式，但不知何故，图像一定太大并触发了所有内容的大小调整，我猜?如果有人有解释，我很乐意听到.

completely resolved the issue, so that now the actual font-size matches what is set in the CSS. Despite all the width:100% styles set on the image itself and on its parent containers, somehow the image must have been too large and triggered a resize of all content, I guess? If anyone has an explanation I'd love to hear it.

这篇关于为什么 iPhone 邮件中的字体大小如此之小?必须放大到 26px的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！