移动终端iframe的旋屏

demo地址：

含有iframe a.html的页面：http://www.adanghome.com/js_demo/30/

a.html的页面：http://www.adanghome.com/js_demo/30/a.html

=========================================

移动终端上，iframe对旋屏的支持有些奇怪。比如我有两个页面，index.html和a.html。index.html包含一个iframe，iframe指向a.html。a.html里对css和js都做了一些针对旋屏的处理：

【css】：

<style>

#b{width:300px;height:200px;background:blue;}

@media screen and (orientation:portrait){

#b{background:red;}

}

@media screen and (orientation:landscape){

#b{background:green;}

}

</style>

<div id="b"></div>

横屏的时候，#b的颜色为绿色，竖屏的时候，#b的颜色为红色。

【js】：

window.addEventListener("orientationchange",function(){

    alert(“旋屏”);

});

监听横竖屏事件，在横竖屏变换的时候，会弹出“旋屏”两个字。

单独打开http://www.adanghome.com/js_demo/30/a.html，一切正常，都按预想的方式正常工作。

但如果打开http://www.adanghome.com/js_demo/30，发现很有些奇怪。首先，js方面，iframe中的a.html无法监听到旋屏事件，alert("旋屏")失败。其次，css方面在android下可以正常变化，和单独打开a.html效果一样，但在ios下（我的设备是ios6系统）异常，并非不能变化，但变化并不正确。

转载于:https://www.cnblogs.com/cly84920/p/4426446.html