用CSS判断
/* 竖屏 */
@media all and (orientation: portrait) {
/* 自定义样式 */
}
/* 横屏 */
@media all and (orientation: landscape) {
/* 自定义样式 */
}
用JS判断
new Vue({
el: "#app",
data() {
return {
orientation: '', // 横竖屏标记``,
}
},
created() {
},
mounted() {
this.orient();
window.addEventListener( 'orientationchange', this.orient);
},
methods: {
orient() {
if (window.orientation === 90 || window.orientation === -90) {
//横屏
this.orientation = 'landscape';
}
else if (window.orientation === 0 || window.orientation === 180) {
//竖屏
this.orientation = 'portrait';
}
},
}
})