<!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>
原文地址