PhoneGap中文网

 找回密码
 立即注册
查看: 188190|回复: 12

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

[复制链接]

23

主题

141

帖子

260

积分

中级会员

Rank: 3Rank: 3

积分
260
发表于 2013-7-5 19:35:09 | 显示全部楼层 |阅读模式
html5屏幕旋转事件 onorientationchange

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

添加屏幕旋转事件侦听,可随时发现屏幕旋转状态(左旋、右旋还是没旋)。
例子:

// 判断屏幕是否旋转
  1. 4. 屏幕旋转事件:onorientationchange

  2. 添加屏幕旋转事件侦听,可随时发现屏幕旋转状态(左旋、右旋还是没旋)。例子:

  3. // 判断屏幕是否旋转

  4. function orientationChange() {

  5.     switch(window.orientation) {

  6.       case 0:

  7.             alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);

  8.             break;

  9.       case -90:

  10.             alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);

  11.             break;

  12.       case 90:   

  13.             alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);

  14.             break;

  15.       case 180:   

  16.           alert("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);

  17.           break;

  18.     };<br>};

  19. // 添加事件监听

  20. addEventListener('load', function(){

  21.     orientationChange();

  22.     window.onorientationchange = orientationChange;

  23. });

复制代码
it营
回复

使用道具 举报

23

主题

141

帖子

260

积分

中级会员

Rank: 3Rank: 3

积分
260
 楼主| 发表于 2013-7-5 19:43:16 | 显示全部楼层
我们在开发Mobile Web应用时,一个最佳实践就是采用流式布局,保证最大可能地利用有限的屏幕空间。
  1. window.orientation属性与onorientationchange事件   

  2. window.orientation :这个属性给出了当前设备的屏幕方向,0表示竖屏,正负90表示横屏(向左与向右)模式

  3. onorientationchange : 在每次屏幕方向在横竖屏间切换后,就会触发这个window事件,用法与传统的事件类似
复制代码
1:使用onorientationchange事件的回调函数,来动态地为body标签添加一个叫orient的属性,同时以body[orient=landspace]或body[orient=portrait]的方式在css中定义对应的样式,这样就可以实现在不同的屏幕模式下显示不同的样式。如下代码示例:
Html代码
  1. <!Doctype html>  
  2.     <html>  
  3.         <head>  
  4.             <meta charset="utf-8">  
  5.             <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">  
  6.             <title>横竖屏切换检测</title>  
  7.             <style type="text/css">  
  8.                 body[orient=landscape]{  
  9.                     background-color: #ff0000;  
  10.                 }  
  11.       
  12.                 body[orient=portrait]{  
  13.                     background-color: #00ffff;  
  14.                 }  
  15.             </style>  
  16.         </head>  
  17.         <body orient="landspace">  
  18.             <div>  
  19.                 内容  
  20.             </div>  
  21.             <script type="text/javascript">  
  22.                 (function(){  
  23.                     if(window.orient==0){  
  24.                         document.body.setAttribute("orient","portrait");  
  25.                     }else{  
  26.                         document.body.setAttribute("orient","landscape");  
  27.                     }  
  28.                 })();  
  29.                 window.onorientationchange=function(){  
  30.                     var body=document.body;  
  31.                     var viewport=document.getElementById("viewport");  
  32.                     if(body.getAttribute("orient")=="landscape"){  
  33.                         body.setAttribute("orient","portrait");  
  34.                     }else{  
  35.                         body.setAttribute("orient","landscape");  
  36.                     }  
  37.                 };  
  38.             </script>  
  39.         </body>  
  40.     </html>  
复制代码
2: 类似的思路,不通过CSS的属性选择器来实现,如下代码的实现方案:
Html代码
  1. <!Doctype html>  
  2.     <html>  
  3.         <head>  
  4.             <meta charset="utf-8">  
  5.             <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">  
  6.             <title>横竖屏切换检测</title>  
  7.             <style type="text/css">  
  8.                 .landscape body {  
  9.                     background-color: #ff0000;  
  10.                 }  
  11.       
  12.                 .portrait body {  
  13.                     background-color: #00ffff;  
  14.                 }  
  15.             </style>  
  16.         </head>  
  17.         <body orient="landspace">  
  18.             <div>  
  19.                 内容  
  20.             </div>  
  21.             <script type="text/javascript">  
  22.                 (function(){  
  23.                     var init=function(){  
  24.                         var updateOrientation=function(){  
  25.                             var orientation=window.orientation;  
  26.                             switch(orientation){  
  27.                                 case 90:   
  28.                                 case -90:  
  29.                                     orientation="landscape";  
  30.                                     break;  
  31.                                 default:  
  32.                                     orientation="portrait";  
  33.                                     break;  
  34.                             }  
  35.                             document.body.parentNode.setAttribute("class",orientation);  
  36.                         };  
  37.       
  38.                         window.addEventListener("orientationchange",updateOrientation,false);  
  39.                         updateOrientation();  
  40.                     };  
  41.                     window.addEventListener("DOMContentLoaded",init,false);  
  42.                 })();  
  43.             </script>  
  44.         </body>  
  45.     </html>  
复制代码
使用media query方式

    这是一种更为方便的方式,使用纯CSS就实现了对应的功能,如下代码演示:
Html代码  收藏代码
  1. <!Doctype html>  
  2.     <html>  
  3.         <head>  
  4.             <meta charset="utf-8">  
  5.             <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">  
  6.             <title>横竖屏切换检测</title>  
  7.             <style type="text/css">  
  8.                 @media all and (orientation : landscape) {  
  9.                     body {   
  10.                         background-color: #ff0000;   
  11.                     }  
  12.                 }  
  13.       
  14.                 @media all and (orientation : portrait){  
  15.                     body {  
  16.                         background-color: #00ff00;  
  17.                     }  
  18.                 }  
  19.             </style>  
  20.         </head>  
  21.         <body>  
  22.             <div>  
  23.                 内容  
  24.             </div>  
  25.         </body>  
  26.     </html>  
复制代码
低版本浏览器的平稳降级

     如果目标移动浏览器不支持media query,同时window.orientation也不存在,则我们需要采用另外一种方式来实现————使用定时器“伪实时”地对比当前窗口的高(window.innerHeight)与宽(window.innerWidth)之比,从而判定当前的横竖屏状态。如下代码所示:
Html代码
  1. <!Doctype html>  
  2.     <html>  
  3.         <head>  
  4.             <meta charset="utf-8">  
  5.             <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">  
  6.             <title>按键</title>  
  7.             <style type="text/css">  
  8.                 .landscape body {  
  9.                     background-color: #ff0000;  
  10.                 }  
  11.       
  12.                 .portrait body {  
  13.                     background-color: #00ffff;  
  14.                 }  
  15.             </style>  
  16.             <script type="text/javascript">  
  17.                 (function(){  
  18.                     var updateOrientation=function(){  
  19.                         var orientation=(window.innerWidth > window.innerHeight)? "landscape" : "portrait";  
  20.                         document.body.parentNode.setAttribute("class",orientation);  
  21.                     };  
  22.       
  23.                     var init=function(){  
  24.                         updateOrientation();  
  25.                         window.setInterval(updateOrientation,5000);  
  26.                     };  
  27.                     window.addEventListener("DOMContentLoaded",init,false);  
  28.                 })();  
  29.             </script>  
  30.         </head>  
  31.         <body>  
  32.             <div>  
  33.                 内容  
  34.             </div>  
  35.         </body>  
  36.     </html>  
复制代码
统一解决方案

将以上的两种解决方案整合在一起,就可以实现一个跨浏览器的解决方案,如下代码:
Html代码

  1.     <!Doctype html>  
  2.     <html>  
  3.         <head>  
  4.             <meta charset="utf-8">  
  5.             <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">  
  6.             <title>横竖屏切换检测</title>  
  7.             <style type="text/css">  
  8.                 .landscape body {  
  9.                     background-color: #ff0000;  
  10.                 }  
  11.       
  12.                 .portrait body {  
  13.                     background-color: #00ffff;  
  14.                 }  
  15.             </style>  
  16.             <script type="text/javascript">  
  17.                 (function(){  
  18.                     var supportOrientation=(typeof window.orientation == "number" && typeof window.onorientationchange == "object");  
  19.       
  20.                     var updateOrientation=function(){  
  21.                         if(supportOrientation){  
  22.                             updateOrientation=function(){  
  23.                                 var orientation=window.orientation;  
  24.                                 switch(orientation){  
  25.                                     case 90:  
  26.                                     case -90:  
  27.                                         orientation="landscape";  
  28.                                         break;  
  29.                                     default:  
  30.                                         orientation="portrait";  
  31.                                 }  
  32.                                 document.body.parentNode.setAttribute("class",orientation);  
  33.                             };  
  34.                         }else{  
  35.                             updateOrientation=function(){  
  36.                                 var orientation=(window.innerWidth > window.innerHeight)? "landscape":"portrait";  
  37.                                 document.body.parentNode.setAttribute("class",orientation);  
  38.                             };  
  39.                         }  
  40.                         updateOrientation();  
  41.                     };  
  42.       
  43.                     var init=function(){  
  44.                         updateOrientation();  
  45.                         if(supportOrientation){  
  46.                             window.addEventListener("orientationchange",updateOrientation,false);  
  47.                         }else{      
  48.                             window.setInterval(updateOrientation,5000);  
  49.                         }  
  50.                     };  
  51.                     window.addEventListener("DOMContentLoaded",init,false);  
  52.                 })();  
  53.             </script>  
  54.         </head>  
  55.         <body>  
  56.             <div>  
  57.                 内容  
  58.             </div>  
  59.         </body>  
  60.     </html>  
复制代码
it营
回复 支持 反对

使用道具 举报

0

主题

59

帖子

61

积分

注册会员

Rank: 2

积分
61
发表于 2013-9-27 15:44:53 | 显示全部楼层
小手一抖,钱钱到手!
回复 支持 反对

使用道具 举报

0

主题

15

帖子

62

积分

注册会员

Rank: 2

积分
62
发表于 2014-2-21 10:24:42 | 显示全部楼层
小手一抖,钱钱到手!
回复 支持 反对

使用道具 举报

0

主题

7

帖子

18

积分

新手上路

Rank: 1

积分
18
发表于 2015-4-29 16:03:05 | 显示全部楼层
好东西,值得收藏
回复 支持 反对

使用道具 举报

0

主题

1

帖子

4

积分

新手上路

Rank: 1

积分
4
发表于 2015-9-17 16:10:37 | 显示全部楼层
有用,收下了先!
回复 支持 反对

使用道具 举报

0

主题

1

帖子

4

积分

新手上路

Rank: 1

积分
4
发表于 2016-3-24 21:36:53 | 显示全部楼层
这是检测移动端页面是否横屏或者竖屏,另外,我想问一下,是否能够强行将一个手机页面打开就横屏显示?希望有大牛能够指点指点,十分感谢。
回复 支持 反对

使用道具 举报

0

主题

3

帖子

10

积分

新手上路

Rank: 1

积分
10
发表于 2016-6-2 11:32:35 | 显示全部楼层
你懂得 发表于 2013-7-5 19:43
我们在开发Mobile Web应用时,一个最佳实践就是采用流式布局,保证最大可能地利用有限的屏幕空间。1:使用o ...

不得不给楼主一个大大的赞
回复 支持 反对

使用道具 举报

0

主题

3

帖子

10

积分

新手上路

Rank: 1

积分
10
发表于 2016-6-2 11:33:14 | 显示全部楼层
不得不给楼主一个大大的赞,太受益
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2024-10-16 14:56 , Processed in 0.081888 second(s), 33 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表