网站识别移动设备跳转至手机端页面的代码集锦

一个网站,当访客在手机端上访问的时候,最终落地的应该是手机端的页面。如果网站采用的是响应式框架做了自适应,那么体验是OK的;但是如果网站不是用响应式,而是PC和手机端分离开来,那么访客使用移动设备访问网站PC页面的时候,就有必要为网站做识别跳转代码,这种情况尤其经常出现在PC页面被搜索引擎收录,访客在手机上搜索的结果呈现的是PC的页面地址,这个时候,跳转代码就非常重要,否则你的网页体验度将大打则扣,跳出率直线上升!

几乎每个程序员都有一个自己喜欢的移动识别跳转代码,五花八门的,博主将这些代码不定期的更新集锦,用着蛮舒服,若有错后期将会逐步更新,以备使用

--------------------------------------分割线--------------------------------------

方式一:来自织梦官方给出的识别移动端跳转





这是织梦系统默认模板文件里的跳转代码,挺不错的,收录了挺多设备,也适合其他网站系统

--------------------------------------分割线--------------------------------------

方式二:来自百度早期的移动识别跳转





其中uaredirect.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
            }
        }
    }
}
;

代码压缩后如下

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}}}};

--------------------------------------分割线--------------------------------------

方式三:将网站域名中的www批量替换为m

原理:手机系统识别www>转为m>实现页面转换为手机端,这个方法适合将PC和手机端分成www和m两个域名的网站(当然,m也可以是wap或者4g等),并且URL规则(文件路径或者路由规则)要一样才行

下面代码添加到JS文件里,然后网页开头调用这个JS即可

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

当然,以上是跳转到当前页URL所对应的移动端URL,如果要跳转至你指定的移动端URL,那么
要在PC端头部做PC端内页地址要跳转到哪个手机端的页面的定义,如下:


说明:$shipei是变量,自己写。如果您就一个页面,就指定到具体页面即可。

你可能感兴趣的:(网站识别移动设备跳转至手机端页面的代码集锦)