当前位置：首页 > article >正文

vue项目门店官网页面, 根据视口大小自动跳转页面逻辑(pc --＞ mobile / mobile --＞pc)

article 2024/11/14 6:56:50

vue门店官网页面, 根据视口大小自动跳转页面逻辑(pc --> mobile / mobile -->pc)

在app.html文件添加以下代码逻辑

pc --> mobile

//  PC切换M端
;(function () {
  function resizeEventHandler() {
    var isMobile = /(iPhone|iPad|iPod|iOS|Android)/i.test(
      window.navigator.userAgent
    )
    var deviceWidth = document.documentElement.clientWidth
    if (isMobile || deviceWidth <= 750) {
      // 跳转移动端页面
      console.log('[pc端页面--PC端访问->切换M端：]')
      var origin = window.location.origin
      window.location.href = origin + '/mobile/'
    }
  }

  if (!document.addEventListener) return
  window.addEventListener('resize', resizeEventHandler)
  document.addEventListener('DOMContentLoaded', resizeEventHandler)
})()

mobile -->pc逻辑与上面相似

<script>
    // M端切换PC端
    (function() {
      function resizeEventHandler () {
        var isMobile = /(iPhone|iPad|iPod|iOS|Android)/i.test(window.navigator.userAgent);
        var deviceWidth = document.documentElement.clientWidth;
        if (!isMobile && deviceWidth > 750) {
          // 跳转PC端页面
          console.log('[PC端页面--M端访问->切换PC端：]');
          var origin = window.location.origin;
          var pathname = window.location.pathname.replace('/mobile', '');
          var search = window.location.search;
          window.location.href = origin + pathname + search;
        }
      }

      if (!document.addEventListener) return;
      window.addEventListener('resize', resizeEventHandler);
      document.addEventListener('DOMContentLoaded', resizeEventHandler);
    })();
  </script>