一、需求：

第一步：判斷是網頁端還是手機端

第二步：判斷手機端，手機是橫屏顯示還是豎屏顯示

二、解決方法：

監聽網頁端還是手機端

監聽顯示頁面寬高變化

三、代碼如下：

methods: {_isMobile() {let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);return flag;},renderResize() {// 判斷橫豎屏let width = document.documentElement.clientWidth;let height = document.documentElement.clientHeight;if (width > height) {this.$router.replace("/landscape");} else {this.$router.replace("/vertical_screen");}},watch() {if (this._isMobile()) {// 監聽 resize 方法this.renderResize();} else {this.$router.replace("/pc");}},},mounted() {window.addEventListener("resize", this.watch, false);// 如果顯示頁面寬高沒有變化，判斷網頁端還是手機端this.watch();},beforeDestroy() {// 移除監聽window.removeEventListener("resize", this.watch, false);},

?

總結

以上是生活随笔為你收集整理的VUE：解决判断网页端与手机端情况下，横竖屏无法判断的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。