方法一、
link引用判断
<!--引用竖屏样式-->
<link rel="stylesheet" media="all and (orientation:portrait)" href="../*****.css" rel="external nofollow" >
<!--引用横屏样式-->
<link rel="stylesheet" media="all and (orientation:landscape)" href="../******.css" rel="external nofollow" >
方法二、
css判断
<style>
@media (orientation: portrait ){
//竖屏CSS
}
@media ( orientation: landscape ){
//横屏CSS
}
</style>
方法三、
js判断
$(function(){
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);
})
用户改变设备查看模式时会触发onorientationchange事件
orientation有4个值:0,90,-90,180 值为0或180的时候为竖屏(180为倒过来的竖屏);值为90或-90时为横屏(-90为倒过来的横屏模式);
Vue监听:
mounted () {
this.$nextTick(() => {
window.addEventListener("resize", this.renderResize, false)
})
},
methods: {
renderResize() {
// 判断横竖屏
let width = document.documentElement.clientWidth
let height = document.documentElement.clientHeight
if(width > height) {
alert('横屏')
}
},
}