手机端访问PC端网站判断识别跳转至手机端页面代码集锦

最新推荐文章于 2023-03-11 11:37:30 发布

都说了要微辣的

最新推荐文章于 2023-03-11 11:37:30 发布

阅读量5.5k

点赞数 11

分类专栏：前端相关文章标签：手机端判断跳转 PC 识别

本文链接：https://blog.csdn.net/WeilaPls/article/details/84712521

版权

前端相关专栏收录该内容

5 篇文章 0 订阅

订阅专栏

手机端访问PC端网站识别跳转至手机端页面代码集锦

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

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

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

将下面这段代码复制到html或者模板的head之前就可以

<!--//移动端识别//-->
<meta http-equiv="mobile-agent" content="format=xhtml;url=你的移动端网址">
<script type="text/javascript">
	if(window.location.toString().indexOf('pref=padindex') != -1)
	{}
	else
	{
		if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent)))
	{
		if(window.location.href.indexOf("?mobile")<0)
	{
		try
	{
		if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent))
		{window.location.href="你的移动端网址";}
		else if(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}
</script>
<!--/-->

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

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

在html或者模板中的head之前加入下面代码

<!--//移动端识别//-->
<script type="text/javascript" src="/style/js/uaredirect.js"></script>
<script type="text/javascript">uaredirect("你的移动端网址");</script>
<!--/-->

其中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<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;
}
} 
var url = window.location.href;
url = url.replace("www.", "m.");
mobile_device_detect(url);

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

<meta name=”mobile-agent” content=”format=html5;url=http://m.网址.com/$shipei”>

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

方式四：通过JS 判断浏览器客户端类型(ipad,iphone,android)来做相应跳转

var bForcepc = fGetQuery("dv") == "pc";   
function fBrowserRedirect(){   
   var sUserAgent = navigator.userAgent.toLowerCase();  
   var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";    
   var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";  
   var bIsMidp = sUserAgent.match(/midp/i) == "midp";  
   var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";  
   var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";  
   var bIsAndroid = sUserAgent.match(/android/i) == "android";  
   var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";  
   var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";   
   if(bIsIpad){   
       var sUrl = location.href;      
       if(!bForcepc){   
           window.location.href = "http://ipad.mail.163.com/";  
       }   
   }   
   if(bIsIphoneOs || bIsAndroid){   
       var sUrl = location.href;      
       if(!bForcepc){   
           window.location.href = "http://smart.mail.163.com/";  
       }   
   }   
   if(bIsMidp||bIsUc7||bIsUc||bIsCE||bIsWM){   
       var sUrl = location.href;      
       if(!bForcepc){   
           window.location.href = "http://m.mail.163.com/";  
       }   
   }   
}  
function fGetQuery(name){//获取参数值   
   var sUrl = window.location.search.substr(1);  
   var r = sUrl.match(new RegExp("(^|&)" + name + 
"=([^&]*)(&|$)"));  
   return (r == null ? null : (r[2]));  
}  
function fShowVerBlock(){     
   if(bForcepc){   
       document.getElementByIdx_x("dv_block").style.display = "block";  
   }   
   else{   
       document.getElementByIdx_x("ad_block").style.display = "block";  
   }   
}  
fBrowserRedirect();

方式五：通过JS语句判断WEB网站的访问端是电脑还是手机，以显示不同端对应的页面

<script>
    // PC端 移动端 跳转，注意：是根据客户端来决定最终落地页，而不是根据访问的URL
    var is_mobi = navigator.userAgent.toLowerCase().match(/(ipod|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i) != null;
        if (is_mobi) {
            window.location.href = "index.html";/*如果是移动端访问的页面，移动端页面要注释掉这段代码，否则死循环*/
        }else{
            window.location.href="index.html" /*如果是PC端访问的页面*，PC端页面要注释掉这段代码，否则死循环/
        }
</script>

方式六：如何判断访问网站的机器类型-如何判断ipad

如何判断是否是 iPad 浏览器呢，关键是看它的 User Agent 中是否有 iPad。iPad 使用的是 Safari Mobile 浏览器，他的的 User Agent 是：

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10
function is_iPad(){        
 [object Object] [object Object] [object Object]var ua = navigator.userAgent.toLowerCase();
 [object Object] [object Object] [object Object]if(ua.match(/iPad/i)=="ipad") {                
 [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]return true;
 [object Object] [object Object] [object Object]} else {
 [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]return false;
 [object Object] [object Object] [object Object]}
}
$is_iPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
RewriteCond %{HTTP_USER_AGENT} ^.*iPad.*$
RewriteRule ^(.*)$ http://ipad.fairyfish.net [R=301]