vue網頁 PC端和移動端兼容方案


,通過媒體查詢實現響應式(@media)
優點:適用於小型網頁,用戶交互較少的項目,代碼用量較少;
缺點:在頁面內容過多,用戶交互過多的時候,如果通過 @media 來一個個改的話,那代碼量可就很多了,而且也不方便維護。因此需要另一種方式來解決這個問題。

,通過判斷打開設備的類型,區分需要顯示的方式和界面

 //App.vue
  mounted() {
      if (this._isMobile()) {
        alert("手機端");
        // this.$router.replace('/m_index');
      } else {
        alert("pc端");
        // this.$router.replace('/pc_index');
      }
    },
    methods: {
      //App.vue
      _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;
      }
  }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM