一個(gè)網(wǎng)站孝常,當(dāng)訪(fǎng)客在手機(jī)端上訪(fǎng)問(wèn)的時(shí)候苟跪,最終落地的應(yīng)該是手機(jī)端的頁(yè)面允乐。如果網(wǎng)站采用的是響應(yīng)式框架做了自適應(yīng)矮嫉,那么體驗(yàn)是OK的;但是如果網(wǎng)站不是用響應(yīng)式牍疏,而是PC和手機(jī)端分離開(kāi)來(lái),那么訪(fǎng)客使用移動(dòng)設(shè)備訪(fǎng)問(wèn)網(wǎng)站PC頁(yè)面的時(shí)候拨齐,就有必要為網(wǎng)站做識(shí)別跳轉(zhuǎn)代碼鳞陨,這種情況尤其經(jīng)常出現(xiàn)在PC頁(yè)面被搜索引擎收錄,訪(fǎng)客在手機(jī)上搜索的結(jié)果呈現(xiàn)的是PC的頁(yè)面地址瞻惋,這個(gè)時(shí)候厦滤,跳轉(zhuǎn)代碼就非常重要,否則你的網(wǎng)頁(yè)體驗(yàn)度將大打則扣歼狼,跳出率直線(xiàn)上升掏导!
幾乎每個(gè)程序員都有一個(gè)自己喜歡的移動(dòng)識(shí)別跳轉(zhuǎn)代碼,五花八門(mén)的羽峰,博主將這些代碼不定期的更新集錦趟咆,用著蠻舒服,若有錯(cuò)后期將會(huì)逐步更新梅屉,以備使用
--------------------------------------分割線(xiàn)--------------------------------------
方式一:來(lái)自織夢(mèng)官方給出的識(shí)別移動(dòng)端跳轉(zhuǎn)
<!--//////////////移動(dòng)端識(shí)別//////////////////-->
<meta http-equiv="mobile-agent" content="format=xhtml;url=你的移動(dòng)端網(wǎng)址">
<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="你的移動(dòng)端網(wǎng)址";}
else if(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}
</script>
<!--/////////////////////////////////////////-->
這是織夢(mèng)系統(tǒng)默認(rèn)模板文件里的跳轉(zhuǎn)代碼值纱,挺不錯(cuò)的,收錄了挺多設(shè)備坯汤,也適合其他網(wǎng)站系統(tǒng)
--------------------------------------分割線(xiàn)--------------------------------------
方式二:來(lái)自百度早期的移動(dòng)識(shí)別跳轉(zhuǎn)
<!--//////////////移動(dòng)端識(shí)別//////////////////-->
<script type="text/javascript" src="/style/js/uaredirect.js"></script>
<script type="text/javascript">uaredirect("你的移動(dòng)端網(wǎng)址");</script>
<!--/////////////////////////////////////////-->
其中uaredirect.js文件中的代碼如下(我懶虐唠,懶的去上傳文件,自己建文件復(fù)制進(jìn)去)
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}}}};
--------------------------------------分割線(xiàn)--------------------------------------
方式三:將網(wǎng)站域名中的www批量替換為m
原理:手機(jī)系統(tǒng)識(shí)別www>轉(zhuǎn)為m>實(shí)現(xiàn)頁(yè)面轉(zhuǎn)換為手機(jī)端惰聂,這個(gè)方法適合將PC和手機(jī)端分成www和m兩個(gè)域名的網(wǎng)站(當(dāng)然疆偿,m也可以是wap或者4g等),并且URL規(guī)則(文件路徑或者路由規(guī)則)要一樣才行
下面代碼添加到JS文件里搓幌,然后網(wǎng)頁(yè)開(kāi)頭調(diào)用這個(gè)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;
}
}
//因?yàn)橄喈?dāng)部分的手機(jī)系統(tǒng)不知道信息,這里是做臨時(shí)性特殊辨認(rèn)
if(navigator.platform.indexOf('iPad') != -1)
{
window.location=url;
}
//做這一部分是因?yàn)锳ndroid手機(jī)的內(nèi)核也是Linux
//但是navigator.platform顯示信息不盡相同情況繁多,因此從瀏覽器下手杆故,即用navigator.appVersion信息做判斷
var check = navigator.appVersion;
if( check.match(/linux/i) )
{
//X11是UC瀏覽器的平臺(tái) ,如果有其他特殊瀏覽器也可以附加上條件
if(check.match(/mobile/i) || check.match(/X11/i))
{
window.location=url;
}
}
//類(lèi)in_array函數(shù)
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);
當(dāng)然鼻种,以上是跳轉(zhuǎn)到當(dāng)前頁(yè)URL所對(duì)應(yīng)的移動(dòng)端URL反番,如果要跳轉(zhuǎn)至你指定的移動(dòng)端URL,那么
要在PC端頭部做PC端內(nèi)頁(yè)地址要跳轉(zhuǎn)到哪個(gè)手機(jī)端的頁(yè)面的定義叉钥,如下:
<meta name=”mobile-agent” content=”format=html5;url=http://m.網(wǎng)址.com/$shipei”>
說(shuō)明:$shipei是變量,自己寫(xiě)罢缸。如果您就一個(gè)頁(yè)面,就指定到具體頁(yè)面即可投队。