vue项目中pc 手机端两套代码屏幕改变时互相跳转

原创已于 2022-05-05 15:43:29 修改 · 689 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2020-10-16 11:45:17 首次发布

该博客探讨了如何进行移动端网页的屏幕适配。通过JavaScript代码展示了当窗口宽度小于750px时，重定向到不同的URL。同时，介绍了使用用户代理检测来判断设备类型，从而提供不同的页面跳转策略，确保网页在不同设备上的良好显示效果。

index.html中

		if(document.body.clientWidth<750){
          window.location.href='http://百度';
          // console.log(1111)
				};
                //当然随时改变屏幕大小也会改变的，所以也要加上
                window.addEventListener('resize',()=>{
                    if(document.body.clientWidth<750){
          window.location.href='http://百度2';
          //  console.log(1111)
                }
            })

或者

  if (/Android|webOS| iPhone | iPad | iPod |BlackBerry|opera mini|opera mobile|appleWebkit.*mobile|mobile/i.test(
    navigator.userAgent)) {
    window.location.href = "https://百度";
  }else{
    window.location.href = "https://百度2";
  }