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 相关文章推荐
javascript实现浏览器窗口传递参数的方法
Sep 03 Javascript
详解JavaScript对象和数组
Dec 03 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 Javascript
JS 对java返回的json格式的数据处理方法
Dec 05 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
详解Vue双向数据绑定原理解析
Sep 11 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
Nov 24 Javascript
webpack写jquery插件的环境配置
Dec 21 jQuery
在 Vue 中使用 JSX 及使用它的原因浅析
Feb 10 Javascript
详谈Object.defineProperty 及实现数据双向绑定
Jul 18 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
php计算十二星座的函数代码
2012/08/21 PHP
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
2019/12/11 PHP
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
详解webpack的配置文件entry与output
2017/08/21 Javascript
JavaScript实现美化滑块效果
2019/05/17 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
python获取标准北京时间的方法
2015/03/24 Python
Python正规则表达式学习指南
2016/08/02 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
python实现烟花小程序
2019/01/30 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
Keras实现DenseNet结构操作
2020/07/06 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
45个非常奇妙的CSS3 特性应用示例
2012/01/01 HTML / CSS
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
开学典礼决心书
2014/03/11 职场文书
项目申请汇报材料
2014/08/16 职场文书
小学生校园广播稿
2014/09/28 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
哪类餐饮行业,最适合在高校创业?
2019/08/19 职场文书
2020年个人安全保证书参考模板
2020/01/08 职场文书
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript