分享两个手机访问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 相关文章推荐
JS获取IUSR_机器名和IWAM_机器名帐号的密码
Dec 06 Javascript
JavaScript 对Cookie 操作的封装小结
Dec 31 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
Nov 28 Javascript
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
Sep 25 Javascript
8个超实用的jQuery功能代码分享
Jan 08 Javascript
javascript实现简单的进度条
Jul 02 Javascript
浅析JavaScript声明变量
Dec 21 Javascript
JS优化与惰性载入函数实例分析
Apr 06 Javascript
JS中关于正则的巧妙操作
Aug 31 Javascript
详解vue mint-ui源码解析之loadmore组件
Oct 11 Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 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
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
yii2使用gridView实现下拉列表筛选数据
2017/04/10 PHP
PHP使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
JS Array对象入门分析
2008/10/30 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
jQuery的初始化与对象构建之浅析
2011/04/12 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
javascript实现的网站访问量统计代码
2015/12/20 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
JS正则表达式验证中文字符
2017/05/08 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
自己动手封装一个React Native多级联动
2018/09/19 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
原生JavaScript实现购物车
2021/01/10 Javascript
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
python 全文检索引擎详解
2017/04/25 Python
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
Python测试人员需要掌握的知识
2018/02/08 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
美国领先的在线旅游网站:Orbitz
2018/11/05 全球购物
大学生毕业求职简历的自我评价
2013/10/24 职场文书
自我鉴定模板
2013/10/29 职场文书
写给女朋友的检讨书
2014/01/28 职场文书
客服部班长工作责任制
2014/02/25 职场文书
校园联欢晚会主持词
2014/03/17 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2014年平安创建工作总结
2014/11/24 职场文书