基于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 相关文章推荐
JS验证身份证有效性示例
Oct 11 Javascript
多种方法实现JS动态添加事件
Nov 01 Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
Bootstarp基本模版学习教程
Feb 01 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
Aug 07 Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 Javascript
Vue侦测相关api的实现方法
May 22 Javascript
JS中实现浅拷贝和深拷贝的代码详解
Jun 05 Javascript
详解vue 组件
Jun 11 Javascript
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
在“咖啡之国”感受咖啡文化
2021/03/03 咖啡文化
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
JS中Date日期函数中的参数使用介绍
2014/01/02 Javascript
javascript制作幻灯片(360度全景图片)
2015/07/28 Javascript
详谈JavaScript的闭包及应用
2017/01/17 Javascript
vue.js实现含搜索的多种复选框(附源码)
2017/03/23 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
从Python的源码浅要剖析Python的内存管理
2015/04/16 Python
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
python简单猜数游戏实例
2015/07/09 Python
一步步教你用Python实现2048小游戏
2017/01/19 Python
python实现朴素贝叶斯分类器
2018/03/28 Python
简单谈谈Python的pycurl模块
2018/04/07 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
python join方法使用详解
2019/07/30 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
Expected conditions模块使用方法汇总代码解析
2020/08/13 Python
Visual Studio Code搭建django项目的方法步骤
2020/09/17 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
在校生党员自我评价
2013/09/25 职场文书
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书
民事和解协议书格式
2014/11/29 职场文书
导游词之千岛湖
2019/09/23 职场文书
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers