Question

我的网站是www.familyhistoryconferencenwa.org

我有一台MacBook Air，一台iPhone 5和一台iPad Air，所以我在iOS 8.1.1中说这个，但显然我希望这个解决方案适用于所有平台上的所有平板电脑和智能手机。

在网站的“课程表”页面上，我有一个iframe可以在运行OS X Yosemite（10.1.1）的MacBookAir上正常工作，但是在运行iOS 8.1.1的iPad Air和iPhone 5上，框架宽度显示不正确。它向右延伸到页面右边缘之外。如果您在台式机或笔记本电脑上访问该站点，那么在移动设备上，您应该看到我的意思。

我的问题是：我使用什么代码让iframe在移动设备上正常显示？

相关代码是：

<div style="text-align: center"> 
<iframe src="url"; frame-border="1"; height="600px"; width="100%">
</iframe>
</div>

正如我所说，此代码在MacBook Air上正常运行。 iframe占用页面的宽度。但是在iPhone和iPad上，框架超出了页面的右边界。我究竟做错了什么？（顺便说一句，如果我将高度设置为100％，我莫名其妙地得到一个大约200像素高的帧，尽管源文档需要600px才能查看全部。）

我已经查阅了两篇关于HTML编码的文章，在网上搜索了其他论坛网站，并在这个网站上搜索了类似问题的答案，但没有运气。我在这个网站上看过“移动设备上的iframe有问题”这个项目，但我真的希望我不会因此而坚持回答。

非常感谢任何帮助。

由于

史蒂夫

Answer 1

到目前为止我提出的最佳响应iframe代码是：

// HTML：

<div class="iframe-container iframe-container-for-wxh-500x350"
style="-webkit-overflow-scrolling: touch; overflow: auto;">

<iframe src="http://urlToTargetSite.com">

  <p style="font-size: 110%;"><em><strong>IFRAME:</strong> There is
  iframe content here but your browser version does not support
  iframes.</em> Please update your browser to its current version 
  and try again.</p>

</iframe>

</div>

// CSS：

.iframe-container {
  position: relative;
  margin: 5px;
  height: 0;
  overflow: hidden;
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #7a8b8b;
  /* put following styles (necessary for overflow and
     scrolling handling) in div container around iframe
     because not stable in CSS
     -webkit-overflow-scrolling: touch;
     overflow: auto; */
}

.iframe-container-for-wxh-500x350 {
  padding: 10px 10px 70% 10px; /* padding-bottom = h/w as a % */
}

代码背后的基本原理可以在How To Make Responsive Iframes -- It's Easy!

看到

有三个要点：

在iframe开始标记中设置 no 属性，特别是不宽度和高度。
在iframe周围放置一个div容器，并使用CSS height：0; 然后 padding-bottom：nn％; 为容器提供等于高度：宽度比率，以百分比表示。
使用 -webkit-overflow-scrolling：touch; 和 overflow：auto; 设置div inline ，这是处理滚动和在移动设备上溢出，在CSS中不稳定。

如何在桌面/笔记本电脑和移动设备上使用iframe？

1 个答案: