码迷,mamicode.com
首页 > Web开发 > 详细

html屏幕旋转事件监听

时间:2014-08-07 18:02:40      阅读:341      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   java   使用   io   ar   

近期做微信服务号开发,在做图片展示的时候需要横竖屏的检测实现图片大小不同的展示。

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

摘自:http://bbs.phonegap100.com/thread-28-1-1.html

//js 判断屏幕是否旋转

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应用时,一个最佳实践就是采用流式布局,保证最大可能地利用有限的屏幕空间。

window.orientation属性与onorientationchange事件    

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

onorientationchange : 在每次屏幕方向在横竖屏间切换后,就会触发这个window事件,用法与传统的事件类似

1、使用onorientationchange事件的回调函数,来动态地为body标签添加一个叫orient的属性,同时以body[orient=landspace]或body[orient=portrait]的方式在css中定义对应的样式,这样就可以实现在不同的屏幕模式下显示不同的样式。如下代码示例:

<!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.onorientationchange=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>  

2、类似的思路,不通过CSS的属性选择器来实现,如下代码的实现方案:

<!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>  

使用media query方式

    这是一种更为方便的方式,使用纯CSS就实现了对应的功能,如下代码演示:

<!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)之比,从而判定当前的横竖屏状态。如下代码所示:

<!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>  

统一解决方案

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

    <!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>  

html屏幕旋转事件监听,布布扣,bubuko.com

html屏幕旋转事件监听

标签:style   blog   http   color   java   使用   io   ar   

原文地址:http://www.cnblogs.com/guangxiaoluo/p/3897366.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!