在手机和平板电脑的引导程序中将 iframe 宽度设置为 100%答案

【问题标题】：iframe width to 100% in bootstrap for phones and tablets在手机和平板电脑的引导程序中将 iframe 宽度设置为 100%
【发布时间】：2012-04-11 10:35:58
【问题描述】：

我正在为手机和平板电脑提供网页。我正在使用 OpenX 在那里投放广告。广告应该加载在一个 iframe 中，该 iframe 应该是页面的宽度。我正在使用引导程序。

我用这段代码测试了一些东西：

<iframe src='http://www.cnn.com' width=100% height=120px scrolling='no'></iframe>

这使得 iframe 的宽度与浏览器窗口的宽度完全相同。问题是，如果我在 iphone 上打开它，它会将 iframe 重新缩放到加载到其中的窗口的大小，这是非常不受欢迎的行为。它不会在我的桌面上执行，仅在 iphone 上执行。我还没有用其他智能手机测试过。

基本上我正在寻找的是一个与屏幕宽度相同的 iframe (100%)，当我在其中加载更大的页面时不会重新缩放

【问题讨论】：

【解决方案1】：

我很确定您正在寻找视口元标记来控制它。这是一个可以完整解释的参考：https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

基本上你想把这段代码放到你的脑海里： <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

【讨论】：

是的，我试过了，但它仍然将 iframe 的大小调整为超出屏幕的宽度。这似乎是错误的行为
我找到了一种解决方法：我现在将 iframe 加载到 div 中并设置了一个 overflow:hidden，但这不是一个非常简洁的解决方案...
overflow 技巧很好，只要您不需要滚动 iframe。 iframe 内的任何左/右滑动事件都被iframe 的窗口对象捕获，因此永远不会补偿div 包装器。因此不会发生滚动。