您的位置：首页 > Web前端 > JavaScript

js如何设置网页横屏和竖屏切换

2015-09-05 23:44 701 查看

<!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 onload="screenOrientationEvent()">
<input id="change" type="text" value=""/>
</body>
</html>

原文地址

http://www.dewen.io/q/8694/js%E5%A6%82%E4%BD%95%E8%AE%BE%E7%BD%AE%E7%BD%91%E9%A1%B5%E6%A8%AA%E5%B1%8F%E5%92%8C%E7%AB%96%E5%B1%8F%E5%88%87%E6%8D%A2

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航