iOS Mail 中的图像尺寸缩小答案

【问题标题】：Image size reduction in iOS MailiOS Mail 中的图像尺寸缩小
【发布时间】：2011-04-29 08:32:38
【问题描述】：

我正在为一个应用程序创建一个 HTML 邮件模板，该模板包含一个 440 像素宽的图像。

当我在我的 iphone 上查看它时，它超出了屏幕的宽度。我见过很多次 iOS Mail 会缩小电子邮件的大小以适应所有内容（例如来自 Apple 的电子邮件）。

关于我可能做错了什么有什么想法吗？图像 CSS 和它的容器 CSS 是：

.photo {
    width: 400px;
    height: 460px;
    padding: 20px;
    background: #fff;
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}
.photo img.main-photo {
    max-width: 400px;
}
.photo div.caption {
    width: 400px;
    position: absolute;
    bottom: 20px;
    font-family: 'Indie Flower';
    height: 50px;
    font-size: 20px;
}

而实际的 HTML 是

<div class="photo">
    <img src="{{ photo.images.standard_resolution.url }}" class="main-photo" />
    <div class="caption">
        {{ photo.caption.text }}
    </div>
</div>

更新：这是一个外观示例。我不希望它超出屏幕范围

【问题讨论】：

您在编辑邮件或在 iOS 邮件应用中查看收到的邮件时是否看到此问题？
在 iOS 邮件应用中查看收到的邮件
刚刚更新了上面的初始帖子的外观
你试过缩小图片吗？ :p

标签： iphone html css ios html-email

【解决方案1】：

尝试删除宽度，只使用最大宽度。我想这会解决你的问题。

【讨论】：

【解决方案2】：

400px 太宽，非视网膜 iPhone 是 320px 宽。如果Mail 就像Mobile Safari，它甚至会将iPhone 4 视为320px 宽。你试过更小的尺寸吗？

【讨论】：