html5 Api 浏览器全屏使用心得

最近在做一个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中，这种效果是无法实现了。