分享两个手机访问pc网站自动跳转手机端网站代码


Posted in Javascript onDecember 24, 2020

4G降临,移动网站已经一发不可收拾,pc端和移动端官网并存。如何让别人访问你的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) {}
    }
  }
})();

判断浏览器是否为手机端

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

判断浏览器是否为pc端,是就跳到pc页面

<script>
var browser1 = {
	 versions: function () {
	  var u = navigator.userAgent, app = navigator.appVersion;
	  return {//移动终端浏览器版本信息
	   trident: u.indexOf('Trident') > -1, //IE内核
	   presto: u.indexOf('Presto') > -1, //opera内核
	   webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
	   gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
	   mobile: !!u.match(/AppleWebKit.*Mobile/i) || !!u.match(/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/), //是否为移动终端
	   ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
	   android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
	   iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
	   iPad: u.indexOf('iPad') > -1, //是否iPad
	   webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部
	  };
	 } (),
	 language: (navigator.browserLanguage || navigator.language).toLowerCase()
	}

if(browser1.versions.mobile==false&&browser1.versions.ios==false&&browser1.versions.android==false&&browser1.versions.iPhone==false &&browser1.versions.iPad==false){
		//location.href = location.href.replace("m.","www.");//如果不是手机打开,则跳转到pc页面
		alert("pc");
	}

</script>

以下是补充可以参考

jQuery判断浏览器是移动端还是电脑端自动跳转

一个段小代码,同一个网站针对移动端查看和电脑端查看跳转不同的页面。
首先加载jQuery文件。

$(function(){ 
 var MobileUA = (function() { 
  var ua = navigator.userAgent.toLowerCase(); 
 
  var mua = { 
   IOS: /ipod|iphone|ipad/.test(ua), //iOS 
   IPHONE: /iphone/.test(ua), //iPhone 
   IPAD: /ipad/.test(ua), //iPad 
   ANDROID: /android/.test(ua), //Android Device 
   WINDOWS: /windows/.test(ua), //Windows Device 
   TOUCH_DEVICE: ('ontouchstart' in window) || /touch/.test(ua), //Touch Device 
   MOBILE: /mobile/.test(ua), //Mobile Device (iPad) 
   ANDROID_TABLET: false, //Android Tablet 
   WINDOWS_TABLET: false, //Windows Tablet 
   TABLET: false, //Tablet (iPad, Android, Windows) 
   SMART_PHONE: false //Smart Phone (iPhone, Android) 
  }; 
 
  mua.ANDROID_TABLET = mua.ANDROID && !mua.MOBILE; 
  mua.WINDOWS_TABLET = mua.WINDOWS && /tablet/.test(ua); 
  mua.TABLET = mua.IPAD || mua.ANDROID_TABLET || mua.WINDOWS_TABLET; 
  mua.SMART_PHONE = mua.MOBILE && !mua.TABLET; 
 
  return mua; 
 }()); 
 
 //SmartPhone 
 if (MobileUA.SMART_PHONE) { 
  // 移动端链接地址 
   
  document.location.href = 'http://www.aaa.com/wap/index.html'; 
 } 
});

 需要手机端也网页的数据同步

<script type="text/javascript">

(function(){var ua=navigator.userAgent.toLowerCase();var bIsIpad=ua.match(/ipad/i)=="ipad";var bIsIphoneOs=ua.match(/iphone os/i)=="iphone os";var bIsAndroid=ua.match(/android/i)=="android";var bIsWM=ua.match(/windows mobile/i)=="windows mobile";if(bIsIpad||bIsIphoneOs||bIsAndroid||bIsWM){window.location.href="http://m.3water.com/android/game/826.html"}})();

</script>

第二种方法:

<SCRIPT LANGUAGE="JavaScript">
function mobile_device_detect(url)
{ 
 var thisOS=navigator.platform; 
 var os=new Array("iPhone","iPod","iPad","android","Nokia","SymbianOS","Symbian","Windows Phone","Phone","Linux armv71","MAUI","UNTRUSTED/1.0","Windows CE","BlackBerry","IEMobile");
 for(var i=0;i<os.length;i++)
 { 
 if(thisOS.match(os[i]))
 { 
 window.location=url;
 } 
 }
 
 //因为相当部分的手机系统不知道信息,这里是做临时性特殊辨认
 if(navigator.platform.indexOf('iPad') != -1)
 {
 window.location=url;
 }
 
 //做这一部分是因为Android手机的内核也是Linux
 //但是navigator.platform显示信息不尽相同情况繁多,因此从浏览器下手,即用navigator.appVersion信息做判断
 var check = navigator.appVersion;
 
 if( check.match(/linux/i) )
  {
 //X11是UC浏览器的平台 ,如果有其他特殊浏览器也可以附加上条件
 if(check.match(/mobile/i) || check.match(/X11/i))
   {
 window.location=url;
 } 
 }
 
 //类in_array函数
 Array.prototype.in_array = function(e)
 {
 for(i=0;i<this.length;i++)
 {
 if(this[i] == e)
 return true;
 }
 return false;
 }
} 
mobile_device_detect("http://***.***.com");
</SCRIPT>

备注这里的
mobile_device_detect("http://***.***.com");//里面的地址填的就是您的移动端的网站地址呦。

Javascript 相关文章推荐
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
日期处理的js库(迷你版)--自建js库总结
Nov 21 Javascript
Javascript 中 null、NaN和undefined的区别总结
Apr 10 Javascript
jQuery写的日历(包括日历的样式及功能)
Apr 23 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
Jan 19 Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 Javascript
angular4自定义组件详解
Sep 28 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
Aug 28 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 #Javascript
jQuery知识点整理
Jan 30 #Javascript
浅谈jquery回调函数callback的使用
Jan 30 #Javascript
jQuery修改class属性和CSS样式整理
Jan 30 #Javascript
javascript中AJAX用法实例分析
Jan 30 #Javascript
JavaScript基础函数整理汇总
Jan 30 #Javascript
JS解析XML实例分析
Jan 30 #Javascript
You might like
基于mysql的bbs设计(五)
2006/10/09 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
Yii数据库缓存实例分析
2016/03/29 PHP
Laravel 框架路由原理与路由访问实例分析
2020/04/14 PHP
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
jQuery上传插件webupload使用方法
2017/08/01 jQuery
微信小程序开发之好友列表字母列表跳转对应位置
2017/09/26 Javascript
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
leaflet加载geojson叠加显示功能代码
2020/02/21 Javascript
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
对Python中内置异常层次结构详解
2018/10/18 Python
Python实现的旋转数组功能算法示例
2019/02/23 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
python多线程使用方法实例详解
2019/12/30 Python
美国背景检查、公共记录和人物搜索网站:BeenVerified
2018/02/25 全球购物
大学生自我评价范文分享
2014/02/21 职场文书
老同学聚会感言
2014/02/23 职场文书
小学生开学感言
2014/02/28 职场文书
餐饮业员工工作决心书
2014/03/11 职场文书
租房协议书怎么写
2014/04/10 职场文书
农业项目建议书
2014/08/25 职场文书