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

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);
}

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

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

(0)

相关推荐

  • js判断浏览器的环境(pc端,移动端,还是微信浏览器)

    今天突然看到一段很好的代码,分享给大家,顺便也给自己留个笔记,js判断浏览器的环境具体如下: 方法一: // 判断浏览器函数 function isMobile(){ if(window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|W

  • js如何判断用户是在PC端和还是移动端访问

    最近一直在忙我们团队的项目"咖啡之翼",在这个项目中,我们为移动平台提供了一个优秀的体验.伴随Android平台的红火发展.不仅带动国内智能手机行业,而且许多国内开发者也开始投身于Android移动终端的大浪潮中.如果很多互联网大浪潮你错过了.那么这个Android浪潮你绝对不能错过.目前我们为"咖啡之翼"已经开发了移动终端以及安卓客户端,大家使用Android或者IOS操作系统的手机,直接访问域名www.sygxy.cn即可观看移动终端效果.同时Android客户

  • 详解JS判断页面是在手机端还是在PC端打开的方法

    我们想要的效果是pc文件和mobile文件统一入口,适配不同的设备. 先看看项目的目录: 在index.html里面配置js控制选择那一个文件夹下的文件就可以了. 我们要利用:Navigator 对象,Navigator 对象包含有关浏览器的信息. index.html很简单,直接上码吧: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="vi

  • 基于JS实现移动端访问PC端页面时跳转到对应的移动端网页

    不想通过CSS自适应在PC端和移动端分别显示不同的样式,那么只能通过在移动端访问PC端网页时跳转到对应的移动端网页了,那么怎么跳转呢,网上也有很多文章说明,以下实现思路经过小编测试过,放心使用. 1.效果图 PC端访问显示: 移动端访问显示: 2.实现: 不考虑移动端搜索引擎优化的话,只需要通过JS判断是否移动端,然后确定是否跳转到指定页面就行了,主要JS如下: //判断是否移动端,如果是则跳转到指定的URL地址 function browserRedirect(url) { //只读的字符串,

  • js判断PC端与移动端跳转

    在网上看到很多这样类似的代码,但是有的很复杂,或者有的没有判断完全,上次经理去见完客户回来讲,使用苹果浏览打开pc端(pc已经做了识别跳转)会自动跳转到移动端的网页去,后来经测试才发现 document.writeln(" 是否为移动终端: "+browser.versions.mobile+"</br>");  //打印出来 true 所以在完整版的代码中 第一层if 判断一直是true 以上的原因是因为,网上流传的判断为: mobile: !! u.

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

    1.  代码场景: 描述:在项目中,一般我们会使用响应式布局的方式或者借助bootstrap等插件来做响应式的网站.但是根据业务的需求,手机端可能会在功能上精简很多,我们也会写两套代码,分别用来实现PC端和手机端的功能.此时,就存在一个问题.项目在部署的时候只会使用一个地址,不会针对手机和PC端代码分别进行部署.这个时候就需要我们通过去识别视口分辨率的大小,来自动去跳转对应的代码. 2. 实现方式: 目前网上有很多的方法用来实现PC端和手机端的代码跳转,但我只用了一种实现方式.其他的暂时还没有尝

  • node.js中PC端微信小程序包解密的处理思路

    目录 小程序的源码在哪里 PC端小程序是怎么被加密的 解密思路 预处理 加密后的头部部分 加密后的尾部部分 再漂亮点 commander chalk 源代码 原来发布在掘金,搬过来好了. 微信小程序在PC端是加密存储的,如果直接打开是看不到什么有用的信息的,需要经过解密才可以看到包内具体的内容.本文使用nodejs实现解密算法,主要涉及到crypto, commander, chalk三个包的使用. 小程序的源码在哪里 PC端打开过的小程序会被缓存到本地微信文件的默认保存位置,可以通过微信PC端

  • vue中PC端地址跳转移动端的操作方法

    需求:pc端和移动端是两个独立的项目,两个项目项目中的内容基本相同,链接组合的方式都有规律可循,接到的需求便是在移动端访问pc端的URL连接时,重定向至移动端对应页面. 这个需求实现的方式比较明了,我的大致思路是在路由守卫处监听每个进来的路由请求,分析该请求是否是由移动端访问,若不是,则该路由请求直接放行:若是则分析要进入的路由路径,提取路径中的必要字段,组合称新的移动端链接即可. 里面涉及到了三个知识点:1.路由守卫,2.客户端判断.3.正则提取文字,接下来就分别按照这几点讲解一下,并附上整个

  • js实现一个可以兼容PC端和移动端的div拖动效果实例

    前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouseup在移动端都不起任何作用.毕竟移动端是没有鼠标的,查资料后发现,在移动端与之相对应的分别是:touchstart.touchmove.touchend事件.还有一点要注意的是在PC端获取当前鼠标的坐标是:event.clientX和event.clientY,在移动端获取坐标位置则是:event.

  • 利用PHP判断是手机移动端还是PC端访问的函数示例

    前言 最近在开发项目的时候,分别开发了PC端和手机端,需要实现,用手机访问PC端WWW域名的时候,自动判断跳转到移动端,用电脑访问M域名手机网站的时候,自动跳转到PC端网站,于是有了下面这个判断函数: 示例代码: /** * 移动端判断 */ function isMobile() { // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (isset ($_SERVER['HTTP_X_WAP_PROFILE'])) { return true; } // 如果via信息含有

  • Nuxt.js中PC与移动端间自动识别跳转

    目录 了解 问题 解决 了解 官网类网站,需要考虑seo,使用了 nuxt.js 的 ssr 开发.pc端和移动端分离了,相当于两个独立的项目,部署在同一个服务器上,绑定不同域名. 问题 需要判断当前设备,在两个端之前相互跳转. 解决 根据浏览器ua判断当前是否为移动设备: let isMobile = (ua) => { return !!ua.match(/AppleWebKit.*Mobile.*/) } 因为接触Nuxt.js时间不长,也算不上深入.按直觉来吧: 第一版:在 defaul

  • 用js限制网页只在微信浏览器中打开(或者只能手机端访问)

    用js限制网页只在微信浏览器中打开 js $(function(){ //判断页面是否是在微信浏览器打开 //对浏览器的UserAgent进行正则匹配,不含有微信独有标识的则为其他浏览器 var useragent = navigator.userAgent; if (useragent.match(/MicroMessenger/i) != 'MicroMessenger') { window.location.href = "wxError.html";//若不是微信浏览器,跳转到

  • js判断当前页面在移动设备还是在PC端中打开

    本文实例讲解了js判断当前页面在移动设备还是在PC端中打开的详细代码,分享给大家供大家参考,具体内容如下 var browser = { versions: function () { var u = navigator.userAgent, app = navigator.appVersion; return { //移动终端浏览器版本信息 trident: u.indexOf('Trident') > -1, //IE内核 presto: u.indexOf('Presto') > -1,

  • vue中利用iscroll.js解决pc端滚动问题

    项目中经常遇到区域超出部分会出现滚动条,滚动条在pc端可以通过鼠标滚轮控制上下,在移动端可以通过鼠标拖动页面进行滚动,这两种场景都是符合用户习惯,然而这种滚动条一般都是竖[vertical]项滚动条,如果pc端出现横向滚动条[horizontal],在不做处理的情况下,你只能用鼠标拖动横向滚动条按钮[scrollerbar]展示滚动区域,而且为了美观,一般滚动条会进行样式编写或者隐藏,那么横向区域默认情况下就没法滚动. 二.描述 现为了解决pc端滚动区域能像移动端一样,能够通过鼠标拖动滚动区域直

随机推荐