移动端横屏的JS代码(beta)
2016-06-29来源:易贤网

这篇文章主要介绍了移动端横屏的JS代码(beta) 的相关资料,需要的朋友可以参考下

直接给大家贴代码了

具体代码如下所示:

代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script>

var orientation=0;

function screenOrientationEvent(){

if(orientation == 0)

{

document.getElementById("change").value="竖";

$("body").css({

'transform':'rotate(90deg)',

'-webkit-transform':'rotate(90deg)',

'-moz-transform':'rotate(90deg)'

});

}

else

{

document.getElementById("change").value="横";

$("body").css({

'transform':'rotate(0deg)',

'-webkit-transform':'rotate(0deg)',

'-moz-transform':'rotate(0deg)'

});

}

}

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>

<body onload="screenOrientationEvent()">

<input id="change" type="text" value=""/>

</body>

</html>

以上js代码是实现移动端横屏的核心代码,代码简单易懂,所有没给大家附太多的注释

2026公务员·事业单位培训课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
推荐信息