移动端网页通过css或js判断手机横屏还是竖屏

本文主要是介绍移动端网页通过css或js判断手机横屏还是竖屏，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

如何区分横屏和竖屏， 在CSS中？

//竖屏

@media screen and (orientation:portrait) {    div {        background-color:red;    }}

//横屏

@media screen and (orientation:landscape) {    div {        background-color:red;    }}

如何区分横屏和竖屏， 在JS中？

function hengshuping(){
if(window.orientation==180||window.orientation==0){
console.log("竖屏状态！")
}
if(window.orientation==90||window.orientation==-90){console.log("横屏状态！")
}
}
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);

这篇关于移动端网页通过css或js判断手机横屏还是竖屏的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---