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

时间:2014-01-20 14:32:12

标签: css html5 iframe screen-orientation

我正在尝试开发一个非常简单的移动网络应用,通过iFrame显示网站列表。 应用程序始终以protrait模式启动,当切换到横向模式时,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和其他网站上找到的每一个解决方案,以使我的代码正常工作,但没有成功。

1 个答案:

答案 0 :(得分:2)

您已将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;

删除evrything并保持这个:

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

另外,对于检查方向的纯html方式,请在head中添加:

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

检查这个帖子=&gt; Detect change in orientation using javascript