方向更改后 iframe 的宽度未更新答案

【问题标题】：Width of iframe not updated after orientation change方向更改后 iframe 的宽度未更新
【发布时间】：2014-01-20 14:32:12
【问题描述】：

我正在尝试开发一个非常简单的移动网络应用程序来通过 iFrame 显示网站列表。应用程序始终以纵向模式启动，当切换到横向模式时，iFrame 的宽度不会更新，因此在横向模式下旋转时 iframe 不会填充设备宽度。我在 HTML 中添加了脚本，以强制应用在方向更改时重新加载 iframe，希望它能解决问题，但没有成功。

这是我的 HTML 代码

<!DOCTYPE html>
<html>
    <head>
       <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    </head>
    <body>
        <script>
           var supportsOrientationChange = "onorientationchange" in window,
           orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

           window.addEventListener(orientationEvent, function() {
              window.location.reload()
           }, 
    }
    onload = addNumber;
    </script>

    <iframe id="wc1" src="http://<url>" seamless></iframe>
    <iframe id="wc2" src="http://<url>" seamless></iframe>
    <iframe id="wc3" src="http://<url>" seamless></iframe>
    <iframe id="wc4" src="http://<url>" seamless></iframe>
   </body>

这是我的 CSS 代码

html, body {
  width:100%;
  height:100%;
  padding:0;
  border:0;
  margin:0;
}

iframe {
  width:100%;
  height:100%;
  padding: (0, 0, 0, 0);
}

我是一名移动网络开发新手，我发誓我尝试了在 SO 和其他网站上找到的每一个解决方案，以使我的代码正常工作，但没有成功。

【问题讨论】：

你尝试添加'display: block;'你的 iframe css 规则？
为什么meta 在body 中而不是在head...哦等等....head 在哪里？？？
你疯了！:)
@wickywills：谁？？？？我？？？ :\
@NoobEditor ：不，OP 斩首了他们的页面——不过你打败了我。

标签： css html iframe screen-orientation

【解决方案1】：

您已将 javascript 设置为：

var supportsOrientationChange = "onorientationchange" in window,
           orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

           window.addEventListener(orientationEvent, function() {
              window.location.reload()
           },/*<= what is this bracket closing, and why extra comma???*/ 
    }
    onload =  addNumber;

删除所有东西并保留这个：

window.addEventListener("orientationchange", function() {
      window.location.reload();
}, false);

另外，对于检查 orient 的纯 html 方式，请将其添加到您 head 中：

<meta http-equiv="refresh" content="1">

也检查这个线程 => Detect change in orientation using javascript

【讨论】：

复制粘贴时false消失了。感谢您的建议，它值得 +1 :-) 但这并不能解决问题。见我上面的评论...... :-(
好的，谢谢。我仍然需要学习更多，但总的来说要练习......我真的应该得到 -1 :)
@sthor69：我应该做-1吗？ ;)