Css 方向更改后未更新iframe的宽度_Css_Html_Iframe_Screen Orientation

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

css html iframe

Css 方向更改后未更新iframe的宽度,css,html,iframe,screen-orientation,Css,Html,Iframe,Screen Orientation,我正在尝试开发一个非常简单的移动web应用程序，通过iFrame显示网站列表。应用程序总是在protrait模式下启动，当它切换到横向模式时，iFrame的宽度不会更新，因此在横向模式下旋转时，iFrame不会填充设备宽度。我添加了HTML脚本，以强制应用程序在方向发生变化时重新加载iframe，希望它能够解决问题，但没有成功这是我的HTML代码 <!DOCTYPE html> <html> <head> <meta name=

我正在尝试开发一个非常简单的移动web应用程序，通过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>

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

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

另外，对于检查方向的纯html方式，请将此添加到您的

标题中：
<meta http-equiv="refresh" content="1">



也检查此线程=>
是否尝试添加“display:block；”你的iframe css规则？为什么meta
在body
中而不是head
中…哦，等等，head在哪里？你的头丢了！：）@恶棍：谁？？？我？？：\@NoobEditor：不，OP把他们的页面砍头了——不过你比我快。复制和粘贴时，虚假信息消失了。谢谢你的建议，它应该得到+1:-）但它并不能解决问题。见我上面的评论…：-（是的，谢谢。我还需要更多的学习，但总的来说要练习……我真的应该得到-1:）@sthor69:我应该做-1吗？？）
window.addEventListener("orientationchange", function() {
      window.location.reload();
}, false);

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