个人中心
gpt4 book ai didi

html - iPhone Mail 在 html 电子邮件中调整图像/div 的大小

转载 作者：技术小花猫 更新时间：2023-10-29 10:27:04 25 4
gpt4 key购买 nike

我正在使用 MadMimi 进行电子邮件促销。到目前为止，我的电子邮件在所有浏览器和设备上看起来都是一致的，包括 iPad 上的 iOS(在邮件应用程序中)。然而，iPhone 上的 iOS 上的图像存在一个奇怪的调整大小问题(同样是邮件应用程序)。请参阅下面的 CSS 和屏幕截图。如您所见，图像超出了其父元素的宽度。有谁知道为什么会发生这种情况或如何纠正它？谢谢。

CSS:

.outer-wrapper {
     width: 600px;
     max-width: 100%;
     margin: 0 auto;
}
.inner-wrapper {
     width: 100%;
     border-radius: 10px;
     overflow: hidden;
     background-color: white;
     border: 1px solid #dddddd;
}
img {
     width: 600px;
     max-width: 100%;
     height: auto;
}

HTML:

<body>
   <div class="outer-wrapper">  
      <div class="browser">Email look weird? Be sure to enable images, or view it on the web <a href="[[web_link]]" target="_blank">here</a>.</div>
      <div class="inner-wrapper">
         <a href="#"><img src="http://pintsizedtreasures.com/newsletters/header-2.jpg"></a>
         <div class="body-wrapper">
            [content...]
         </div>
      </div>
   </div>
</body>

Screenshot from iPhone Mail

最佳答案

我通过反复试验找到了答案。我颠倒了 .outer-wrapper max-width 和 width 的值。正确的 CSS 应该是:

.outer-wrapper {
     width: 100%;
     max-width: 600px;
     margin: 0 auto;
}

我认为正在发生的事情是，当用户使用 iPhone 时，视口(viewport)中的像素小于 600，因此渲染器将回退到 max-width for 。外包装。由于它设置为 100% 而不是声明的像素值，因此 img 100% 宽度会回落到视口(viewport)宽度，而不是其父级宽度。所有其他浏览器的视口(viewport)大于 600px，这是声明的像素值，并且不会出现问题(iPad、桌面等)。显然是我的愚蠢疏忽。

它应该是这样的。

enter image description here

关于html - iPhone Mail 在 html 电子邮件中调整图像/div 的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31899082/

25 4 0
文章推荐： css - Chrome 位置 :fixed inside position:absolute breaking with iframe/video
文章推荐： css - Twitter 的 Typeahead - 调试呈现的 HTML？
文章推荐： css - 闪烁的背景颜色动画
文章推荐： css - 应用来自父项的样式
技术小花猫
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com