html5屏幕旋转事件，html5如何实现屏幕旋转

你懂得

html5屏幕旋转事件 onorientationchange

很多用html5开发移动应用的童鞋不知道怎么实现监听屏幕旋转，下面为大家介绍html5如何实现屏幕旋转

添加屏幕旋转事件侦听，可随时发现屏幕旋转状态（左旋、右旋还是没旋）。
例子：

// 判断屏幕是否旋转

1. 4. 屏幕旋转事件：onorientationchange
   
2. 
   
3. 添加屏幕旋转事件侦听，可随时发现屏幕旋转状态（左旋、右旋还是没旋）。例子：
   
4. 
   
5. // 判断屏幕是否旋转
   
6. 
   
7. function orientationChange() {
   
8. 
   
9.     switch(window.orientation) {
   
10. 
    
11.     　　case 0:
    
12. 
    
13.             alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);
    
14. 
    
15.             break;
    
16. 
    
17.     　　case -90:
    
18. 
    
19.             alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);
    
20. 
    
21.             break;
    
22. 
    
23.     　　case 90:   
    
24. 
    
25.             alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);
    
26. 
    
27.             break;
    
28. 
    
29.     　　case 180:   
    
30. 
    
31.         　　alert("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);
    
32. 
    
33.         　　break;
    
34. 
    
35.     };<br>};
    
36. 
    
37. // 添加事件监听
    
38. 
    
39. addEventListener('load', function(){
    
40. 
    
41.     orientationChange();
    
42. 
    
43.     window.onorientationchange = orientationChange;
    
44. 
    
45. });
    
46. 
    

复制代码

2yun

能否强制竖屏显示呢

端九九

czh 发表于 2016-3-24 21:36
**** 作者被禁止或删除 内容自动屏蔽 ****

请问，这个问题解决了么，h5在某个页面强制横屏显示

myyue214

mark-------

FeeLinear

mark一下

Sogrey

不得不给楼主一个大大的赞，太受益

Sogrey

你懂得 发表于 2013-7-5 19:43
我们在开发Mobile Web应用时，一个最佳实践就是采用流式布局，保证最大可能地利用有限的屏幕空间。1：使用o ...

不得不给楼主一个大大的赞

czh

这是检测移动端页面是否横屏或者竖屏，另外，我想问一下，是否能够强行将一个手机页面打开就横屏显示？希望有大牛能够指点指点，十分感谢。

csstop

有用，收下了先！

979036

好东西，值得收藏