在项目开发中发现,屏幕旋转旋转后html界面出现了不同的显示效果,如果在屏幕旋转后重新加载一次界面的话就会显示的相对来说能接受一点,为此如果能监听到屏幕发生了旋转后进行相关的回调处理,则问题会得到解决,从网上搜索了大半天,并进行相关的测试后,有小的收获,仅以记之。
可以参考这篇论坛: html5屏幕旋转事件 ,测试的时候按照@media 的css可以实现相关的body颜色改变效果,其他的方法在浏览器中没有测试成功,或许是没有在手机上进行测试缘故。
下面的代码再手机上进行测试后,测试通过。
html页面如下:
上面的代码是创建了一个cordova 项目后在主页面的index.html里面添加了测试代码,就是script标签里面的代码. 手机浏览器支持orientationchange 事件(屏幕旋转事件) 和 window.orientation属性(屏幕旋转角度)
orientation 可能值有 0 (默认竖屏) ,-90(向右旋转) ,90 (向左旋转)三个可选项。
关键代码:
测试使用的是android设备,在ios没有进行测试。补充说明:关于手机横竖屏,屏幕选转的问题,以及屏幕适配的问题,在开发中都是要进行考虑的,为的是更好的用户体验,当然也可以在浏览器中固定屏幕的朝向,在游戏开发中很重要。不同的平台有不同的处理机制,比如使用以下js可以实现解除屏幕旋转锁定(屏幕可以进行旋转),和固定屏幕旋转。
具体的相关其他细致用法,可以进行相关的搜索与研究。小结:有些特定的功能,只有在真机上进行相关的测试后才能证明(代码没有逻辑错误),在浏览器中则没有相关的效果,这需要我们多多摸索,多多尝试,这也是开发进行测试的意义所在。
如有不妥不正确之处,希望批评指出,相互学习,共同进步!