注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

阿当的博客

世界是个游乐场

 
 
 

日志

 
 

移动终端iframe的旋屏  

2013-08-28 16:47:00|  分类: html5,移动前端开 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

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系统)异常,并非不能变化,但变化并不正确。



  评论这张
 
阅读(8)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018