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


Posted in Javascript onDecember 24, 2020

不想通过CSS自适应在PC端和移动端分别显示不同的样式,那么只能通过在移动端访问PC端网页时跳转到对应的移动端网页了,那么怎么跳转呢,网上也有很多文章说明,以下实现思路经过小编测试过,放心使用。

1.效果图

PC端访问显示:

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

移动端访问显示:

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

2.实现:

不考虑移动端搜索引擎优化的话,只需要通过JS判断是否移动端,然后确定是否跳转到指定页面就行了,主要JS如下:

//判断是否移动端,如果是则跳转到指定的URL地址
function browserRedirect(url) {
//只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值
var sUserAgent = navigator.userAgent.toLowerCase();
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 (bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
window.location.replace(url);
}
}

然后在页面引用JS,调用方法就行了:

<script src="../js/wap.js"></script>
<script type="text/javascript">browserRedirect("http://ycdoit.com/test/testmobile.html");</script>

三水点靠木友情提醒:大家可以用PC端和移动端访问测试页面演示效果哦!

下面三水点靠木小编为大家分享几个常用的

pc自动跳移动端

(function() {
      if (/Android|webOS|iPhone|iPad|Windows Phone|iPod|BlackBerry|SymbianOS|Nokia|Mobile|Opera Mini/i.test(navigator.userAgent)) {
        var siteName = window.location.pathname;
        if (url.indexOf("?pc") < 0) {
          try {
				if (typeof siteName !== "undefined") {
            	window.location.href = "https://m.3water.com" + siteName
          		} 
          } catch (e) {}
        }
      }
    })();

移动端自动跳pc

;(function() {
  var reWriteUrl = function(url) {
    if (url) {
      var Splits = url.split("/"),
      siteName = window.location.pathname;
      if (typeof siteName !== "undefined") {
        return "https://3water.com" + siteName
      }
    }
  };
  if (!/Android|webOS|iPhone|iPad|Windows Phone|iPod|BlackBerry|SymbianOS|Nokia|Mobile|Opera Mini/i.test(navigator.userAgent)) {
    var url = window.location.href;
    var pathname = window.location.pathname;
    if (url.indexOf("?m") < 0) {
      try {
        window.location.href = reWriteUrl(url)
      } catch(e) {}
    }
  }
})();

关于本文给大家介绍的基于JS实现移动端访问PC端页面时跳转到对应的移动端网页就给大家介绍这么多,希望对大家有所帮助!

Javascript 相关文章推荐
javascript 构造函数强制调用经验总结
Dec 02 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
JavaScript 异常处理 详解
Feb 06 Javascript
javascript模拟php函数in_array
Apr 27 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
Dec 07 Javascript
JS请求servlet功能示例
Jun 01 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
Apr 13 Javascript
浅谈JavaScript 代码简洁之道
Jan 09 Javascript
最简单的vue消息提示全局组件的方法
Jun 16 Javascript
JS实现的排列组合算法示例
Jul 16 Javascript
原生Vue 实现右键菜单组件功能
Dec 16 Javascript
Vue vee-validate插件的简单使用
Jun 22 Vue.js
js贪吃蛇游戏实现思路和源码
Apr 14 #Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 #Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 #Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 #Javascript
原生js编写autoComplete插件
Apr 13 #Javascript
JS中的eval 为什么加括号
Apr 13 #Javascript
jQuery操作属性和样式详解
Apr 13 #Javascript
You might like
测试您的 PHP 水平的题目
2007/05/30 PHP
php getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
Yii2增加验证码步骤详解
2016/04/25 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
使用jQuery轻松实现Ajax的实例代码
2010/08/16 Javascript
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
React 高阶组件入门介绍
2018/01/11 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
python使用fork实现守护进程的方法
2017/11/16 Python
Python机器学习k-近邻算法(K Nearest Neighbor)实例详解
2018/06/25 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
Python实现DDos攻击实例详解
2019/02/02 Python
JupyterNotebook设置Python环境的方法步骤
2019/12/03 Python
Python pandas库中的isnull()详解
2019/12/26 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
韩国三星集团旗下时尚品牌官网:SSF SHOP
2016/08/02 全球购物
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
园林设计师自荐信
2013/11/18 职场文书
实习鉴定评语
2014/01/19 职场文书
学习自我鉴定
2014/02/01 职场文书
小学毕业寄语大全
2014/04/03 职场文书
班级学习计划书
2014/04/27 职场文书
出纳试用期自我评价
2015/03/10 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
开学随笔
2015/08/15 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL