检测移动设备横竖屏切换

最新推荐文章于 2018-05-02 21:22:11 发布

Ace_Yu

最新推荐文章于 2018-05-02 21:22:11 发布

阅读量3k

点赞数

本文链接：https://blog.youkuaiyun.com/Ace_Yu/article/details/9288975

版权

本文介绍了一个用于自动检测设备横竖屏状态的网页测试案例。该案例利用了jQuery库及浏览器事件来获取屏幕方向变化，并根据不同设备（如iPad和Android设备）特性进行适配，以确定设备当前处于横屏还是竖屏状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title> 横竖屏测试网页 </title>
<script src="./jquery-1.4.2.min.js"></script>
<script type="text/javascript">
// Detect whether device supports orientationchange event, otherwise fall back to
// the resize event.
var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

// 监听事件
window.addEventListener(orientationEvent, function() {
    var coment_ = "-------------浏览器实时状态-----------\n";
     //浏览器时下窗口可视区域高度
    coment_ = coment_ + "浏览器时下窗口可视区域高度:" + $(window).height()+"\n";
     //浏览器时下窗口可视区域宽度
    coment_ = coment_ + "浏览器时下窗口可视区域宽度:" + $(window).width()+"\n";
    
    //浏览器时下窗口文档的高度
    coment_ = coment_ + "浏览器时下document的高度:" + $(document).height()+"\n";
    //浏览器时下窗口文档的宽度
    coment_ = coment_ + "浏览器时下document的宽度:" +$(document).width()+"\n";
    
    //浏览器时下窗口文档body的高度
    coment_ = coment_ + "浏览器时下窗口文档body的高度:" + $(document.body).height()+"\n";
    //浏览器时下窗口文档body的宽度
    coment_ = coment_ + "浏览器时下窗口文档body的宽度:" +$(document.body).width()+"\n";
        
    //浏览器时下窗口文档body的总高度，包括border padding margin
    coment_ = coment_ + "浏览器时下窗口文档body的总高度(包括border padding margin):"+$(document.body).outerHeight(true)+"\n";
    //浏览器时下窗口文档body的总宽度，包括border padding margin 
    coment_ = coment_ + "浏览器时下窗口文档body的总宽度(包括border padding margin):" + $(document.body).outerWidth(true)+"\n";
    
    var ua = navigator.userAgent;
    coment_ = coment_  + "---------设备类型------------\n";
    //判断设备类型 
    if (ua.indexOf("iPad") > 0) {
       coment_ = coment_ + "iPad\n";
       deviceType = "isIpad";
    } else if (ua.indexOf("Android") > 0) {
       coment_ = coment_ + "android\n";
       deviceType = "isAndroid";
    } else {
       coment_ = coment_ + "既不是iPad，也不是android\n";
       return;
    }
   

     // 判断横竖屏 
    coment_ = coment_ + "---------横竖屏------------\n";
    coment_ = coment_ + "window.orientation:"+window.orientation+"\n";
     if ("isIpad" === deviceType) {
       if (Math.abs(window.orientation) === 90) {
           coment_ = coment_ + "iPad横屏\n";
       } else {
           coment_ = coment_ + "iPad竖屏\n";
       }
    } else if ("isAndroid" === deviceType ) {
       if (Math.abs(window.orientation) !== 90) {
           coment_ = coment_ + "android竖屏\n";
       } else {
           coment_ = coment_ + "android横屏\n";
       }
    }
    alert(coment_);
},false);
 
</script>
</head>
<body>
横竖屏测试网页
</body>
</html>