JS如何实现网站中PC端和手机端自动识别并跳转对应的代码


Posted in Javascript onJanuary 08, 2020

1.  代码场景:

JS如何实现网站中PC端和手机端自动识别并跳转对应的代码

描述:在项目中,一般我们会使用响应式布局的方式或者借助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();

JS如何实现网站中PC端和手机端自动识别并跳转对应的代码

反之,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);
}

本次分享已完成,大家若有更好的方法或者意见欢迎指正学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
表单填写时用回车代替TAB的实现方法
Oct 09 Javascript
基于jQuery的Tab选项框效果代码(插件)
Mar 01 Javascript
chrome下img加载对height()的影响示例探讨
May 26 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 Javascript
JavaScript随机生成信用卡卡号的方法
Apr 07 Javascript
简述JavaScript的正则表达式中test()方法的使用
Jun 16 Javascript
javascript html实现网页版日历代码
Mar 08 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
小程序自定义组件实现城市选择功能
Jul 18 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
JavaScript 判断浏览器是否是IE
Feb 19 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 #Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 #Javascript
你知道JavaScript Symbol类型怎么用吗
Jan 08 #Javascript
js实现多个标题吸顶效果
Jan 08 #Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 #Javascript
jquery实现吸顶导航效果
Jan 08 #jQuery
JS实现网站吸顶条
Jan 08 #Javascript
You might like
备份mysql数据库的php代码(一个表一个文件)
2010/05/28 PHP
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
对比PHP对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
javascript中match函数的用法小结
2014/02/08 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
jquery.picsign图片标注组件实例详解
2018/02/02 jQuery
Vue中&quot;This dependency was not found&quot;问题的解决方法
2018/06/19 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
Vue中通过vue-router实现命名视图的问题
2020/04/23 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
python使用win32com库播放mp3文件的方法
2015/05/30 Python
Python使用email模块对邮件进行编码和解码的实例教程
2016/07/01 Python
如何运行带参数的python脚本
2019/11/15 Python
Python GUI编程学习笔记之tkinter控件的介绍及基本使用方法详解
2020/03/30 Python
python如何实现递归转非递归
2021/02/25 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
ETO男装官方网店:ETO Jeans
2019/02/28 全球购物
培训专员岗位职责
2014/02/26 职场文书
九寨沟导游词
2015/02/02 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
2016党校学习心得体会
2016/01/07 职场文书
管理者日常工作必备:22条企业管理流程模板!
2019/07/12 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android
一行Python命令实现批量加水印
2022/04/07 Python