怎么判断移动端横屏还是竖屏?
怎么判断移动端横屏还是竖屏?
CSS判断横屏竖屏:
@media screen and (orientation: portrait) {
/*竖屏 css*/
}
@media screen and (orientation: landscape) {
/*横屏 css*/
}
JS判断横屏竖屏:
// 移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态。
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function () {
console.log(window.orientation); // 横屏为90 竖屏为0
if (window.orientation === 180 || window.orientation === 0) {
console.log('竖屏状态!');
}
if (window.orientation === 90 || window.orientation === -90) {
console.log('横屏状态!');
}
}, false);
页面横屏和竖屏的变化如下图: