检测移动设备横竖屏切换

时间：2021-10-21 14:45:53
<!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>

标签：

相关文章