转载-js如何设置网页横屏和竖屏切换

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta http-equiv="Content-Type" content="application/xhtml+xml;charset=UTF-8" />
    5. <meta name="viewport" content="width=device-width" />
    6. <title>手机横、竖屏事件</title>
    7. <script language="javascript" type="text/javascript">
    8. //屏幕方向标识，0横屏，其他值竖屏
    9. var orientation=0;
    10. //转屏事件，内部功能可以自定义
    11. function screenOrientationEvent(){
    12.     if(orientation == 0)document.getElementById("change").value="竖";
    13.     else document.getElementById("change").value="横";
    14. }
    15. var innerWidthTmp = window.innerWidth;
    16. //横竖屏事件监听方法
    17. function screenOrientationListener(){
    18.     try{
    19.         var iw = window.innerWidth;    
    20.         //屏幕方向改变处理
    21.         if(iw != innerWidthTmp){
    22.             if(iw>window.innerHeight)orientation = 90;
    23.             else orientation = 0;
    24.             //调用转屏事件
    25.             screenOrientationEvent();
    26.             innerWidthTmp = iw;
    27.         }
    28.     } catch(e){alert(e);};
    29.     //间隔固定事件检查是否转屏，默认500毫秒
    30.     setTimeout("screenOrientationListener()",500);
    31. }
    32. //启动横竖屏事件监听
    33. screenOrientationListener();
    34. </script>
    35. </head>
    36. <body onload="screenOrientationEvent()">
    37. <input id="change" type="text" value=""/>
    38. </body>
    39. </html>

 

注：js手机横竖屏事件实现的方法（不依赖任何其他库），从客户角度是违反了用户的自定义行为的。

 

posted on 2015-08-06 16:40  alanaZ  阅读(1161)  评论(0)  编辑  收藏  举报

导航