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 相关文章推荐
Jquery知识点一 Jquery的ready和Dom的onload的区别
Jan 15 Javascript
修复IE9&amp;safari 的sort方法
Oct 21 Javascript
javascript自定义startWith()和endWith()的两种方法
Nov 11 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
Mar 31 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
基于jquery实现无限级树形菜单
Mar 22 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
深入理解令牌认证机制(token)
Aug 22 Javascript
微信小程序点击保存图片到本机功能
Dec 13 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
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
PHP入门之常量简介和系统常量
2014/05/12 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
解密效果
2006/06/23 Javascript
Prototype使用指南之selector.js说明
2008/10/26 Javascript
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
Vue中img的src属性绑定与static文件夹实例
2017/05/18 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
关于vue 结合原生js 解决echarts resize问题
2020/07/26 Javascript
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
python简单的函数定义和用法实例
2015/05/07 Python
简述Python中的进程、线程、协程
2016/03/18 Python
Python 制作糗事百科爬虫实例
2016/09/22 Python
Python MD5加密实例详解
2017/08/02 Python
Python2.7基于笛卡尔积算法实现N个数组的排列组合运算示例
2017/11/23 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
python time.strptime格式化实例详解
2021/02/03 Python
应届毕业生求职信
2013/11/30 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
入党政审材料范文
2014/12/24 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers