JS 方式的话,移动端的浏览器一般都支持 window.orientation
,通过添加监听事件 onorientationchange 就可以。
CSS 判断横竖屏:
@media screen and (orientation: portrait) {
/*竖屏 css*/
...
}
@media screen and (orientation: landscape) {
/*横屏 css*/
...
}
JS 判断横竖屏:
// 移动端的浏览器一般都支持window.orientation这个参数,
// 通过这个参数可以判断出手机是处在横屏还是竖屏状态。
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
if (window.orientation === 180 || window.orientation === 0) {
alert('竖屏状态!');
}
if (window.orientation === 90 || window.orientation === -90 ){
alert('横屏状态!');
}
}, false);
CSS、JS 判断手机横竖屏: