H5横竖屏的两种解决方法

1，用css解决

<style type="text/css">
@media screen and (orientation:landscape) {
.cover{display:block;}
}
</style>

 

2,js解决

// 横竖屏检测
bindOrientEvent: function () {
var time = 0;

function orient() {
if (window.orientation == 90 || window.orientation == -90) {
$('.cover').show();
} else if (window.orientation == 0 || window.orientation == 180) {
$('.cover').hide();
}
}

orient();
$(window).on('orientationchange', function () {
clearInterval(time);
setInterval(orient, 300);
});
}