ios - 为什么此 iFrame 在 IOS 上没有响应？

Question

我有一个由 ThingLink 生成的 iFrame，我需要将其放入现有网页并响应响应。

我原以为用于制作 YouTube 或 Vimeo iFrame 的常用 CSS 可以完成这项工作。它在大多数浏览器上都是这样做的，但无论出于何种原因，IOS 上的 Safari 似乎都不是这种情况(Safari 桌面似乎可以工作)。为什么是这样？ Iframe 的 HTML 中是否存在导致问题的内容？

Here's a Fiddle显示有问题的 iFrame 行为不当(顶部)和示例 YouTube iFrame 行为(底部)。

当然还有我正在使用的实际代码

HTML:

CSS:

div.iwrap {
    width: 100% ;
    position: relative;
    padding-bottom: 60%;
    height: 0;
    -webkit-overflow-scrolling:touch;
    overflow: hidden;
}

.iwrap object,
.iwrap iframe,
.iwrap embed {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
    border: none;
}

iframe,
object, 
embed {
    max-width: 100%;
}

你可以看到我已经尝试过绝对定位 iframe 的每个 Angular ，但并不愉快。

我要强调的是，它只破坏了 IOS 上的 Safari。桌面版 Safari 和移动版 Android 看起来不错。

任何使该工作正常进行的指示都将不胜感激，但更重要的是，为什么不这样做。

Answer 1

使用我为自己设计的响应式 iframe 代码，并使用您的 src= url，我创建并测试了 this Pen在 CodePen 上。

使用 CodePen 的跨浏览器测试，Pen 在 Android 移动设备上显示和运行正常。 (有一个异常(exception):嵌入式 Youtube 视频在 CrossBrowser 测试中没有音频，尽管在正常 View 中它有。)但是在 iOS 设备上它只显示一个黑色方 block ，而该内容应该是内容。

从您的帖子中我不确定这是否就是您所说的失败。

我还有其他笔，例如， Responsive Iframe - Base Code ，在 iOS 设备上可以正常运行。只有使用您的 src= url 的那个不会。

这让我想知道，即使使用已知的响应式 HTML 和 CSS，源代码中是否存在某些不能很好地与 iOS 兼容的地方。

我对这项技术还不够精通，无法提出可能的建议，但是，我希望我已经证明，即使使用已知的响应式代码，源文档也不会在 iOS 中显示。因此，问题似乎不在于代码，而在于源代码和 iOS 之间的一些内在冲突。

抱歉，我帮不上什么忙，但这也许可以帮助您更具体、更具体地重新表述问题和问题标题，以便吸引其他用户的注意力。

编辑坚持认为，通过指向 CodePen 的链接，我必须包含一些代码。所以，仅仅为了满足这个要求，这里是我的响应式 HTML 和 CSS 代码。

HTML:

<div id="Iframe-Thinglink" 
     class="set-margin set-padding set-border set-box-shadow 
     center-block-horiz">
<div class="responsive-wrapper 
     responsive-wrapper-wxh-600x480"
     style="-webkit-overflow-scrolling: touch; overflow: auto;">

<iframe src="//www.thinglink.com/channelcard/632903487365054466"> 
    <p>Error Message Here</p>
</iframe>
</div>
</div>

CSS:

/* CSS for responsive iframe */
/* ========================= */

/* outer wrapper: set the iframe's width and height by setting  
   max-width & max-height here; max-height greater than   
   padding-bottom % will truncate to padding-bottom % of max-width */
#Iframe-Thinglink {
  max-width: 600px;
  max-height: 100%; 
  overflow: hidden;
}

/* inner wrapper: make responsive */
.responsive-wrapper {
  position: relative;
  height: 0;    /* gets height from padding-bottom */

/* put following styles (necessary for overflow and scrolling  
   handling on mobile devices) inline in .responsive-wrapper around  
   iframe because potentially unstable in CSS:  

   -webkit-overflow-scrolling: touch; overflow: auto; */

}

.responsive-wrapper iframe {  
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;
  border: none;
}

/* padding-bottom = h/w as % -- sets aspect ratio */
/* YouTube video aspect ratio */
.responsive-wrapper-wxh-650x315 {
  padding-bottom: 56.25%;
}
.responsive-wrapper-wxh-600x480 {
  padding-bottom: 80%;
}

/* general styles */
/* ============== */
.set-border {
  border: 5px inset #4f4f4f;
}
.set-box-shadow { 
  -webkit-box-shadow: 4px 4px 14px #4f4f4f;
     -moz-box-shadow: 4px 4px 14px #4f4f4f;
          box-shadow: 4px 4px 14px #4f4f4f;
}
.set-padding {
  padding: 40px;
}
.set-margin {
  margin: 30px;
}
.center-block-horiz {
  margin-left: auto !important;
  margin-right: auto !important;
}