建站经验技巧手机访问自动跳转移动站的JS实现方式汇总

手机访问自动跳转移动站的JS实现方式汇总

很多网站都为PC端和手机端分别制作了PC站和手机站,当手机访问PC站时自动跳转到手机站是不错的体验,可以通过重定向或js的方式来实现这种跳转,本文主要整理几种js跳转的实现方法:

方法1:模仿百度siteapp的跳转方法,将下面的代码保存为“mobile.js”:

function uaredirect(f){try{if(document.getElementById("bdmark")!=null){return}var b=false;if(arguments[1]){var e=window.location.host;var a=window.location.href;if(isSubdomain(arguments[1],e)==1){f=f+"/#m/"+a;b=true}else{if(isSubdomain(arguments[1],e)==2){f=f+"/#m/"+a;b=true}else{f=a;b=false}}}else{b=true}if(b){var c=window.location.hash;if(!c.match("fromapp")){if((navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i))){location.replace(f)}}}}catch(d){}}function isSubdomain(c,d){this.getdomain=function(f){var e=f.indexOf("://");if(e>0){var h=f.substr(e+3)}else{var h=f}var g=/^www\./;if(g.test(h)){h=h.substr(4)}return h};if(c==d){return 1}else{var c=this.getdomain(c);var b=this.getdomain(d);if(c==b){return 1}else{c=c.replace(".","\\.");var a=new RegExp("\\."+c+"$");if(b.match(a)){return 2}else{return 0}}}};

然后通过下面的代码实现跳转,这段代码来自以前的百度siteapp:

<script type="text/javascript" src="mobile.js"></script>
<script type="text/javascript">
    uaredirect("http://m.sohu.com"); //这里写上手机站的URL
</script>

方法2:将PC站网址中的www替换为移动站的前缀m或wap:

<script>
(function() {
  var ua = navigator.userAgent.toLowerCase();
  if (ua.indexOf('android') > -1 || ua.indexOf('iphone') > -1 || ua.indexOf('ipad') > -1 || ua.indexOf('ipod') > -1 || ua.indexOf('mobile') > -1) {
    var url = location.href;
    if (url.indexOf('www') > -1) {
     location.href = url.replace('www.', 'm.'); //m为移动站二级域名前缀
    }
  }
})();
</script>

方法3:最简单的跳转方式,在网页head区域加上这段代码,在相应位置填入对应的移动站网址即可:

<script>
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
window.location = "http://m.sohu.com"; //这里写上手机站的URL
}
</script>

方法4:通过引入device.js库来判断访问端的类型(推荐):

<script src="https://cdn.bootcss.com/device.js/0.2.7/device.min.js"></script>
<script>
if(device.mobile()){
window.location = "http://m.163.com"; //这里写上手机站的URL
}
</script>

通过device.js库可以准确的判断客户端的操作系统或浏览器,官方下载地址:

https://github.com/matthewhudson/device.js

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/website/119.html