JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
程序员文章站
2022-04-09 17:08:43
1. 代码场景:
描述:在项目中,一般我们会使用响应式布局的方式或者借助bootstrap等插件来做响应式的网站。但是根据业务的需求,手机端可能会在功能上精简很多,我...
1. 代码场景:
描述:在项目中,一般我们会使用响应式布局的方式或者借助bootstrap等插件来做响应式的网站。但是根据业务的需求,手机端可能会在功能上精简很多,我们也会写两套代码,分别用来实现pc端和手机端的功能。此时,就存在一个问题。项目在部署的时候只会使用一个地址,不会针对手机和pc端代码分别进行部署。这个时候就需要我们通过去识别视口分辨率的大小,来自动去跳转对应的代码。
2. 实现方式:
目前网上有很多的方法用来实现pc端和手机端的代码跳转,但我只用了一种实现方式。其他的暂时还没有尝试,希望可以跟大家学到更多的解决方案。在此特别感谢<<--老蒋部落-->>的方法给予了我很大的帮助。
此处贴出当前的js代码:
<script type="text/javascript"> function mobilepcredirect() { var suseragent= navigator.useragent.tolowercase(); var bisipad= suseragent.match(/ipad/i) == "ipad"; var bisiphoneos= suseragent.match(/iphone os/i) == "iphone os"; var bismidp= suseragent.match(/midp/i) == "midp"; var bisuc7= suseragent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; var bisuc= suseragent.match(/ucweb/i) == "ucweb"; var bisandroid= suseragent.match(/android/i) == "android"; var bisce= suseragent.match(/windows ce/i) == "windows ce"; var biswm= suseragent.match(/windows mobile/i) == "windows mobile"; if (bisipad || bisiphoneos || bismidp || bisuc7 || bisuc || bisandroid || bisce || biswm) { window.location.href= '手机端跳转页面url'; } else { window.location= 'pc端跳转页面url'; } }; mobilepcredirect(); </script>
将此方法分别写在手机端和pc端公共的common.js中,然后在对应位置写入对应的路径即可。
例如:手机端公共js中代码如下
// 实现网站自动跳转电脑pc端与手机端不同页面 function mobilepcredirect() { var suseragent= navigator.useragent.tolowercase(); var bisipad= suseragent.match(/ipad/i) == "ipad"; var bisiphoneos= suseragent.match(/iphone os/i) == "iphone os"; var bismidp= suseragent.match(/midp/i) == "midp"; var bisuc7= suseragent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; var bisuc= suseragent.match(/ucweb/i) == "ucweb"; var bisandroid= suseragent.match(/android/i) == "android"; var bisce= suseragent.match(/windows ce/i) == "windows ce"; var biswm= suseragent.match(/windows mobile/i) == "windows mobile"; if (bisipad || bisiphoneos || bismidp || bisuc7 || bisuc || bisandroid || bisce || biswm) { console.log("手机端跳转页面url"); } else { console.log("pc端跳转页面url"); // 注:此时写入的是pc端首页跳转路径 window.location.href = getbasepath() + "/education/new_index.html"; } }; mobilepcredirect();
反之,pc端公共js中同样的写法即可。
3. 拓展内容(如何获取项目的根路径?)
获取项目名称:
/** * 获取项目名称 如:/video_learning **/ function getprojectname() { var strpath = window.document.location.pathname; var postpath = strpath.substring(0,strpath.substr(1).indexof('/')+1); return postpath; }
获取项目全路径:
/** * 获取项目全路径 如:http://localhost:8080/video_learning * */ function getbasepath(){ //获取当前网址 var curwwwpath=window.document.location.href; //获取主机地址之后的目录 var pathname=window.document.location.pathname; var pos=curwwwpath.indexof(pathname); //获取地址到端口号 var localhostpath=curwwwpath.substring(0,pos); //项目名 var projectname=pathname.substring(0,pathname.substr(1).indexof('/')+1); return (localhostpath+projectname); }
本次分享已完成,大家若有更好的方法或者意见欢迎指正学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。