Question

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

我原以为用于制作YouTube或Vimeo iFrames的常用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的每个角落，但没有任何乐趣。

我应该强调，只有IOS上的Safari才能打破它。用于桌面的Safari和用于移动设备的Android看起来很不错。

任何有关工作的指示都会非常感激，但更重要的是，为什么不是。

Answer 1

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

使用CodePen的CrossBrowser测试，笔在Android移动设备上正确显示和运行。（有一个例外：嵌入式Youtube视频在CrossBrowser测试中没有音频，虽然在普通视图中它确实如此。）但是在iOS设备上它只显示内容应该是黑色方块。

我不确定你的帖子是否是你所说的失败。

我有其他笔，例如 Responsive Iframe - Base Code，它们可以在iOS设备上正常运行。只使用 src = 网址的人不会。

这让我想知道，即使使用已知的响应式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;
}

为什么这个iFrame在IOS上没有响应？

1 个答案: