html5 Api 浏览器全屏使用心得
2015-09-28 11:27
531 查看
最近在做一个web app,其中要用到照片全屏触摸移动切换效果,果断用了htm5 api的全屏方法,使用方法见我blog中的Html5 Api 实现浏览器全屏的文章。
照片展示原理:
最外层做成全屏显示,里面有4张图片,每个图片的包裹层占满屏幕,要实现切换效果,所以outDiv width设置为400%,里面的div width设置为25%。
.outDiv
{
width:400%;
height:100%;
}
.outDiv div
{
width:25%;
height:100%;
}
<div class='outDiv'>
<div><img /></div>
<div><img /></div>
<div><img /></div>
<div><img /></div>
</div>
最后浏览器测试兼容性,发现Chrome(pc),IE(pc),UC(mobile),QQ(mobile)主流浏览器均能很好的工作,只有fiefox(pc,mobile没有测试过),中outDiv宽度在全屏状态下width无法实现4倍屏幕的大小,无论设置多少其width一直是屏幕大小,正因为这样,其中的图片无法单张满屏显示。虽然web app在移动端完美展现即可,但我还是努力做到pc端也能完美兼容。有碰到此问题的小伙伴们分享下你们的解决办法哦。
各位,找到原因了,通过fireFox Debug,发现全屏宽度被系统默认设置为:100%,且设置为!important,不可修改。所以无论怎么设置width,都无效。看来在fireFox中,这种效果是无法实现了。
![](http://img.blog.csdn.net/20150928121859725?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
照片展示原理:
最外层做成全屏显示,里面有4张图片,每个图片的包裹层占满屏幕,要实现切换效果,所以outDiv width设置为400%,里面的div width设置为25%。
.outDiv
{
width:400%;
height:100%;
}
.outDiv div
{
width:25%;
height:100%;
}
<div class='outDiv'>
<div><img /></div>
<div><img /></div>
<div><img /></div>
<div><img /></div>
</div>
最后浏览器测试兼容性,发现Chrome(pc),IE(pc),UC(mobile),QQ(mobile)主流浏览器均能很好的工作,只有fiefox(pc,mobile没有测试过),中outDiv宽度在全屏状态下width无法实现4倍屏幕的大小,无论设置多少其width一直是屏幕大小,正因为这样,其中的图片无法单张满屏显示。虽然web app在移动端完美展现即可,但我还是努力做到pc端也能完美兼容。有碰到此问题的小伙伴们分享下你们的解决办法哦。
各位,找到原因了,通过fireFox Debug,发现全屏宽度被系统默认设置为:100%,且设置为!important,不可修改。所以无论怎么设置width,都无效。看来在fireFox中,这种效果是无法实现了。
相关文章推荐
- HTML5开发培训课程
- HTML5 Local Storage 本地存储
- 文章标题
- html5 引入百度地图案例
- HTML5使用canvas绘制图形
- HTML5的canvas标签
- HTML5新增的元素和废除的元素
- HTML5的语法的改变
- 【猪猪-前端】HTML5+CSS3技术制作的计算器,下载即可使用,学习HTML5必备DEMO
- 使用HTML5和CSS3碎语
- webkitAnimationEnd事件与webkitTransitionEnd事件
- html5使用indexdb
- 利用html5调用本地摄像头拍照上传图片
- HTML5基本介绍
- html5定位
- html5元素拖拽效果
- 关于HTML5的拖拽
- 初探HTML5
- html5 canvas标签
- WebSocket: HTML5一种新的协议, 实现浏览器与服务器全 双工通信(full-duplex)