我正在尝试开发一个非常简单的移动网络应用,通过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和其他网站上找到的每一个解决方案,以使我的代码正常工作,但没有成功。
答案 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