js监听移动端是否横竖屏

最新推荐文章于 2024-06-19 11:45:16 发布

尜尜alp

最新推荐文章于 2024-06-19 11:45:16 发布

阅读量2.9k

点赞数

分类专栏： js 原生js javascript web前端

本文链接：https://blog.csdn.net/gaga06/article/details/44618871

版权

web前端同时被 3 个专栏收录

51 篇文章 0 订阅

订阅专栏

原生js

50 篇文章 0 订阅

订阅专栏

javascript

34 篇文章 0 订阅

订阅专栏

<!DOCTYPE html> 
<html>
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>手机横、竖屏事件</title> 
<script language="javascript" type="text/javascript">
//屏幕方向标识，0横屏，其他值竖屏
var orientation=0;
//转屏事件，内部功能可以自定义
function screenOrientationEvent(){
    if(orientation == 0)document.getElementById("change").value="竖";
    else document.getElementById("change").value="横";
}
var innerWidthTmp = window.innerWidth;
//横竖屏事件监听方法
function screenOrientationListener(){
    try{
        var iw = window.innerWidth;     
        //屏幕方向改变处理
        if(iw != innerWidthTmp){
            if(iw>window.innerHeight)orientation = 90;
            else orientation = 0;
            //调用转屏事件
            screenOrientationEvent();
            innerWidthTmp = iw;
        }
    } catch(e){alert(e);};
    //间隔固定事件检查是否转屏，默认500毫秒
    setTimeout("screenOrientationListener()",500);
}
//启动横竖屏事件监听
screenOrientationListener();
</script>
</head> 
<body οnlοad="screenOrientationEvent()"> 
<input id="change" type="text" value=""/>
</body>
</html>

尜尜alp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js监听移动端是否横竖屏

手机横、竖屏事件 //屏幕方向标识，0横屏，其他值竖屏var orientation=0;//转屏事件，内部功能可以自定义function screenOrientationEvent(){ if(orientation == 0)document.getElementById("change").value="竖"; else document.getElementBy
复制链接

扫一扫

专栏目录