html5屏幕旋转事件 onorientationchange
很多用html5开发移动应用的童鞋不知道怎么实现监听屏幕旋转,下面为大家介绍 html5如何实现屏幕旋转
添加屏幕旋转事件侦听,可随时发现屏幕旋转状态(左旋、右旋还是没旋)。
例子:
// 判断屏幕是否旋转
很多用html5开发移动应用的童鞋不知道怎么实现监听屏幕旋转,下面为大家介绍 html5如何实现屏幕旋转
添加屏幕旋转事件侦听,可随时发现屏幕旋转状态(左旋、右旋还是没旋)。
例子:
// 判断屏幕是否旋转
- 4. 屏幕旋转事件:onorientationchange
-
- 添加屏幕旋转事件侦听,可随时发现屏幕旋转状态(左旋、右旋还是没旋)。例子:
-
- // 判断屏幕是否旋转
-
- function orientationChange() {
-
- switch(window.orientation) {
-
- case 0:
-
- alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);
-
- break;
-
- case -90:
-
- alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);
-
- break;
-
- case 90:
-
- alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);
-
- break;
-
- case 180:
-
- alert("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);
-
- break;
-
- };<br>};
-
- // 添加事件监听
-
- addEventListener('load', function(){
-
- orientationChange();
-
- window.onorientationchange = orientationChange;
-
- });
我们在开发Mobile Web应用时,一个最佳实践就是采用流式布局,保证最大可能地利用有限的屏幕空间。
1:使用onorientationchange事件的回调函数,来动态地为body标签添加一个叫orient的属性,同时以body[orient=landspace]或body[orient=portrait]的方式在css中定义对应的样式,这样就可以实现在不同的屏幕模式下显示不同的样式。如下代码示例:
Html代码
2: 类似的思路,不通过CSS的属性选择器来实现,如下代码的实现方案:
Html代码
使用media query方式
这是一种更为方便的方式,使用纯CSS就实现了对应的功能,如下代码演示:
Html代码 收藏代码
低版本浏览器的平稳降级
如果目标移动浏览器不支持media query,同时window.orientation也不存在,则我们需要采用另外一种方式来实现————使用定时器“伪实时”地对比当前窗口的高(window.innerHeight)与宽(window.innerWidth)之比,从而判定当前的横竖屏状态。如下代码所示:
Html代码
统一解决方案
将以上的两种解决方案整合在一起,就可以实现一个跨浏览器的解决方案,如下代码:
Html代码
- window.orientation属性与onorientationchange事件
-
- window.orientation :这个属性给出了当前设备的屏幕方向,0表示竖屏,正负90表示横屏(向左与向右)模式
-
- onorientationchange : 在每次屏幕方向在横竖屏间切换后,就会触发这个window事件,用法与传统的事件类似
Html代码
- <!Doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
- <title>横竖屏切换检测</title>
- <style type="text/css">
- body[orient=landscape]{
- background-color: #ff0000;
- }
-
- body[orient=portrait]{
- background-color: #00ffff;
- }
- </style>
- </head>
- <body orient="landspace">
- <div>
- 内容
- </div>
- <script type="text/javascript">
- (function(){
- if(window.orient==0){
- document.body.setAttribute("orient","portrait");
- }else{
- document.body.setAttribute("orient","landscape");
- }
- })();
- window.onorientatiοnchange=function(){
- var body=document.body;
- var viewport=document.getElementById("viewport");
- if(body.getAttribute("orient")=="landscape"){
- body.setAttribute("orient","portrait");
- }else{
- body.setAttribute("orient","landscape");
- }
- };
- </script>
- </body>
- </html>
Html代码
- <!Doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
- <title>横竖屏切换检测</title>
- <style type="text/css">
- .landscape body {
- background-color: #ff0000;
- }
-
- .portrait body {
- background-color: #00ffff;
- }
- </style>
- </head>
- <body orient="landspace">
- <div>
- 内容
- </div>
- <script type="text/javascript">
- (function(){
- var init=function(){
- var updateOrientation=function(){
- var orientation=window.orientation;
- switch(orientation){
- case 90:
- case -90:
- orientation="landscape";
- break;
- default:
- orientation="portrait";
- break;
- }
- document.body.parentNode.setAttribute("class",orientation);
- };
-
- window.addEventListener("orientationchange",updateOrientation,false);
- updateOrientation();
- };
- window.addEventListener("DOMContentLoaded",init,false);
- })();
- </script>
- </body>
- </html>
这是一种更为方便的方式,使用纯CSS就实现了对应的功能,如下代码演示:
Html代码 收藏代码
- <!Doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
- <title>横竖屏切换检测</title>
- <style type="text/css">
- @media all and (orientation : landscape) {
- body {
- background-color: #ff0000;
- }
- }
-
- @media all and (orientation : portrait){
- body {
- background-color: #00ff00;
- }
- }
- </style>
- </head>
- <body>
- <div>
- 内容
- </div>
- </body>
- </html>
-
如果目标移动浏览器不支持media query,同时window.orientation也不存在,则我们需要采用另外一种方式来实现————使用定时器“伪实时”地对比当前窗口的高(window.innerHeight)与宽(window.innerWidth)之比,从而判定当前的横竖屏状态。如下代码所示:
Html代码
- <!Doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
- <title>按键</title>
- <style type="text/css">
- .landscape body {
- background-color: #ff0000;
- }
-
- .portrait body {
- background-color: #00ffff;
- }
- </style>
- <script type="text/javascript">
- (function(){
- var updateOrientation=function(){
- var orientation=(window.innerWidth > window.innerHeight)? "landscape" : "portrait";
- document.body.parentNode.setAttribute("class",orientation);
- };
-
- var init=function(){
- updateOrientation();
- window.setInterval(updateOrientation,5000);
- };
- window.addEventListener("DOMContentLoaded",init,false);
- })();
- </script>
- </head>
- <body>
- <div>
- 内容
- </div>
- </body>
- </html>
将以上的两种解决方案整合在一起,就可以实现一个跨浏览器的解决方案,如下代码:
Html代码
-
- <!Doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
- <title>横竖屏切换检测</title>
- <style type="text/css">
- .landscape body {
- background-color: #ff0000;
- }
-
- .portrait body {
- background-color: #00ffff;
- }
- </style>
- <script type="text/javascript">
- (function(){
- var supportOrientation=(typeof window.orientation == "number" && typeof window.onorientationchange == "object");
-
- var updateOrientation=function(){
- if(supportOrientation){
- updateOrientation=function(){
- var orientation=window.orientation;
- switch(orientation){
- case 90:
- case -90:
- orientation="landscape";
- break;
- default:
- orientation="portrait";
- }
- document.body.parentNode.setAttribute("class",orientation);
- };
- }else{
- updateOrientation=function(){
- var orientation=(window.innerWidth > window.innerHeight)? "landscape":"portrait";
- document.body.parentNode.setAttribute("class",orientation);
- };
- }
- updateOrientation();
- };
-
- var init=function(){
- updateOrientation();
- if(supportOrientation){
- window.addEventListener("orientationchange",updateOrientation,false);
- }else{
- window.setInterval(updateOrientation,5000);
- }
- };
- window.addEventListener("DOMContentLoaded",init,false);
- })();
- </script>
- </head>
- <body>
- <div>
- 内容
- </div>
- </body>
- </html>