第一种方案：
<!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:red;
}
.portrait body {
background-color: blue;
}
</style>
</head>
<body orient="landspace">
<div>
内容
</div>
<script type="text/javascript">
(function(){
var supportsOrientation = (typeof window.orientation == 'number' && typeof window.onorientationchange == 'object');
var HTMLNode = document.body.parentNode;
var updateOrientation = function() {
// rewrite the function depending on what's supported
if(supportsOrientation) {
updateOrientation = function() {
var orientation = window.orientation;
console.log(orientation)
switch(orientation) {
case 90: case -90:
orientation = 'landscape';
break;
default:
orientation = 'portrait';
}
// set the class on the HTML element (i.e. )
HTMLNode.setAttribute('class', orientation);
}
} else {
updateOrientation = function() {
// landscape when width is biggest, otherwise portrait
var orientation = (window.innerWidth > window.innerHeight) ? 'landscape': 'portrait';
// set the class on the HTML element (i.e. )
HTMLNode.setAttribute('class', orientation);
}
}
updateOrientation();
}
var init = function() {
// initialize the orientation
updateOrientation();
if(supportsOrientation) {
window.addEventListener('orientationchange', updateOrientation, false);
} else {
// fallback: update every 5 seconds
setInterval(updateOrientation, 100);
}
}
window.addEventListener('DOMContentLoaded', init, false);
})();
</script>
</body>
</html>
第二种方案：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.landscape{
width: 100%;
height: 100%;
background: red;
}
.portrait{
width: 100%;
height: 100%;
background: blue;
}
</style>
<body>
<script type="text/javascript" src="jquery-3.2.1.min.js" ></script>
<script>
function orient() {
if(window.orientation == 90 || window.orientation == -90) {
//ipad、iphone竖屏；Andriod横屏
$("body").attr("class", "landscape");
orientation = 'landscape';
alert(111111111)
return false;
} else if(window.orientation == 0 || window.orientation == 180) {
//ipad、iphone横屏；Andriod竖屏
$("body").attr("class", "portrait");
orientation = 'portrait';
alert(2222222222)
return false;
}
}
//页面加载时调用
$(function() {
orient();
});
//用户变化屏幕方向时调用
$(window).bind('orientationchange', function(e) {
orient();
});
</script>
</body>
</html>
