近期做微信服務号開發，在做圖檔展示的時候需要橫豎屏的檢測實作圖檔大小不同的展示。
添加螢幕旋轉事件偵聽，可随時發現螢幕旋轉狀态（左旋、右旋還是沒旋）。
摘自：http://bbs.phonegap100.com/thread-28-1-1.html
//js 判斷螢幕是否旋轉
4. 螢幕旋轉事件：onorientationchange
添加螢幕旋轉事件偵聽，可随時發現螢幕旋轉狀态（左旋、右旋還是沒旋）。例子：
// 判斷螢幕是否旋轉
function orientationChange() {
switch(window.orientation) {
case 0:
alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case -90:
alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case 90:
alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case 180:
alert("風景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
};<br>};
// 添加事件監聽
addEventListener('load', function(){
orientationChange();
window.onorientationchange = orientationChange;
}); 我們在開發Mobile Web應用時，一個最佳實踐就是采用流式布局，保證最大可能地利用有限的螢幕空間。
window.orientation屬性與onorientationchange事件
window.orientation :這個屬性給出了目前裝置的螢幕方向，0表示豎屏，正負90表示橫屏（向左與向右）模式
onorientationchange : 在每次螢幕方向在橫豎屏間切換後，就會觸發這個window事件，用法與傳統的事件類似 1、使用onorientationchange事件的回調函數，來動态地為body标簽添加一個叫orient的屬性，同時以body[orient=landspace]或body[orient=portrait]的方式在css中定義對應的樣式，這樣就可以實作在不同的螢幕模式下顯示不同的樣式。如下代碼示例：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>橫豎屏切換檢測</title>
<style type="text/css">
body[orient=landscape]{
background-color: #ff0000;
}
body[orient=portrait]{
background-color: #00ffff;
}
</style>
</head>
<body orient="landspace">
<div>
内容
</div>
<script type="text/javascript">
(function(){
if(window.orient==0){
document.body.setAttribute("orient","portrait");
}else{
document.body.setAttribute("orient","landscape");
}
})();
window.onorientationchange=function(){
var body=document.body;
var viewport=document.getElementById("viewport");
if(body.getAttribute("orient")=="landscape"){
body.setAttribute("orient","portrait");
}else{
body.setAttribute("orient","landscape");
}
};
</script>
</body>
</html> 2、類似的思路，不通過CSS的屬性選擇器來實作，如下代碼的實作方案：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>橫豎屏切換檢測</title>
<style type="text/css">
.landscape body {
background-color: #ff0000;
}
.portrait body {
background-color: #00ffff;
}
</style>
</head>
<body orient="landspace">
<div>
内容
</div>
<script type="text/javascript">
(function(){
var init=function(){
var updateOrientation=function(){
var orientation=window.orientation;
switch(orientation){
case 90:
case -90:
orientation="landscape";
break;
default:
orientation="portrait";
break;
}
document.body.parentNode.setAttribute("class",orientation);
};
window.addEventListener("orientationchange",updateOrientation,false);
updateOrientation();
};
window.addEventListener("DOMContentLoaded",init,false);
})();
</script>
</body>
</html> 使用media query方式
這是一種更為友善的方式，使用純CSS就實作了對應的功能，如下代碼示範：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>橫豎屏切換檢測</title>
<style type="text/css">
@media all and (orientation : landscape) {
body {
background-color: #ff0000;
}
}
@media all and (orientation : portrait){
body {
background-color: #00ff00;
}
}
</style>
</head>
<body>
<div>
内容
</div>
</body>
</html> 低版本浏覽器的平穩降級
如果目标移動浏覽器不支援media query，同時window.orientation也不存在，則我們需要采用另外一種方式來實作————使用定時器“僞實時”地對比目前視窗的高(window.innerHeight)與寬(window.innerWidth)之比，進而判定目前的橫豎屏狀态。如下代碼所示：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>按鍵</title>
<style type="text/css">
.landscape body {
background-color: #ff0000;
}
.portrait body {
background-color: #00ffff;
}
</style>
<script type="text/javascript">
(function(){
var updateOrientation=function(){
var orientation=(window.innerWidth > window.innerHeight)? "landscape" : "portrait";
document.body.parentNode.setAttribute("class",orientation);
};
var init=function(){
updateOrientation();
window.setInterval(updateOrientation,5000);
};
window.addEventListener("DOMContentLoaded",init,false);
})();
</script>
</head>
<body>
<div>
内容
</div>
</body>
</html> 統一解決方案
将以上的兩種解決方案整合在一起，就可以實作一個跨浏覽器的解決方案，如下代碼：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>橫豎屏切換檢測</title>
<style type="text/css">
.landscape body {
background-color: #ff0000;
}
.portrait body {
background-color: #00ffff;
}
</style>
<script type="text/javascript">
(function(){
var supportOrientation=(typeof window.orientation == "number" && typeof window.onorientationchange == "object");
var updateOrientation=function(){
if(supportOrientation){
updateOrientation=function(){
var orientation=window.orientation;
switch(orientation){
case 90:
case -90:
orientation="landscape";
break;
default:
orientation="portrait";
}
document.body.parentNode.setAttribute("class",orientation);
};
}else{
updateOrientation=function(){
var orientation=(window.innerWidth > window.innerHeight)? "landscape":"portrait";
document.body.parentNode.setAttribute("class",orientation);
};
}
updateOrientation();
};
var init=function(){
updateOrientation();
if(supportOrientation){
window.addEventListener("orientationchange",updateOrientation,false);
}else{
window.setInterval(updateOrientation,5000);
}
};
window.addEventListener("DOMContentLoaded",init,false);
})();
</script>
</head>
<body>
<div>
内容
</div>
</body>
</html> 朝朝暮暮.
![APP強制更新(uni-app)項目要求：解決思路：效果圖：具體代碼：總結[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)