分享两个手机访问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 相关文章推荐
javascript模仿msgbox提示效果代码
Jun 10 Javascript
通过js获取div的background-image属性
Oct 15 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
解析javascript中鼠标滚轮事件
May 26 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
Nov 24 Javascript
非常棒的jQuery图片轮播效果
Apr 17 Javascript
深入理解React中es6创建组件this的方法
Aug 29 Javascript
微信扫码支付零云插件版实例详解
Apr 26 Javascript
AngularJS封装$http.post()实例详解
May 06 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
Mar 04 Javascript
vue监听滚动事件的方法
Dec 21 Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
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
使用PHP提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
PHP递归调用的小技巧讲解
2013/02/19 PHP
ThinkPHP访问不存在的模块跳转到404页面的方法
2014/06/19 PHP
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
js 文件引入实现代码
2010/04/23 Javascript
判断JS对象是否拥有某种属性的两种方式
2013/12/02 Javascript
javascript使用定时函数实现跳转到某个页面
2013/12/25 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
2014/05/22 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
jQuery右下角旋转环状菜单特效代码
2015/08/10 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
2015/09/09 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
在Vue中使用Echarts实例图的方法实例
2020/10/10 Javascript
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
Python打包可执行文件的方法详解
2016/09/19 Python
Python使用SQLite和Excel操作进行数据分析
2018/01/20 Python
python之信息加密题目详解
2019/06/26 Python
python使用minimax算法实现五子棋
2019/07/29 Python
Python字典中的值为列表或字典的构造实例
2019/12/16 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
橄榄树药房:OLIVEDA
2019/09/01 全球购物
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
银行求职推荐信范文
2013/11/30 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
2015年女工委工作总结
2015/07/27 职场文书
Golang中异常处理机制详解
2021/06/08 Golang