码迷,mamicode.com
首页 > 移动开发 > 详细

移动端横屏(beta)

时间:2016-05-16 11:06:28      阅读:113      评论:0      收藏:0      [点我收藏+]

标签:

<!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>

  

移动端横屏(beta)

标签:

原文地址:http://www.cnblogs.com/moustache/p/5497132.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!