根據(jù)訪問設(shè)備自動(dòng)識別展示手機(jī)站或PC站的方法

時(shí)間：2022-05-28 10:12:01 | 來源：網(wǎng)絡(luò)營銷

時(shí)間：2022-05-28 10:12:01 來源：網(wǎng)絡(luò)營銷

隨著移動(dòng)互聯(lián)網(wǎng)時(shí)代的到來，相信很多站長都在想辦法把自己的網(wǎng)站做成手機(jī)與電腦通用的網(wǎng)站，如何讓網(wǎng)站自動(dòng)識別手機(jī)端與PC端是各位站長一直困惑的問題。

很多人都想實(shí)現(xiàn)這樣一個(gè)功能：在電腦上輸入域名訪問的是PC端的網(wǎng)站，而在手機(jī)或者平板電腦等移動(dòng)設(shè)備上輸入域名是訪問的一個(gè)手機(jī)網(wǎng)站，而且PC端網(wǎng)站和手機(jī)移動(dòng)端的網(wǎng)站是不一樣的，當(dāng)然手機(jī)移動(dòng)端的網(wǎng)站是簡化的，和微信的微網(wǎng)站一樣的，很簡潔的。

比如：我的網(wǎng)站已經(jīng)建好了，現(xiàn)在又建了一個(gè)手機(jī)網(wǎng)站，怎么才能訪問同一個(gè)域名下讓網(wǎng)站自動(dòng)識別設(shè)備，比方說用電腦上進(jìn)入官網(wǎng)，用移動(dòng)設(shè)備自動(dòng)進(jìn)入手機(jī)站點(diǎn)，這樣就實(shí)現(xiàn)了，手機(jī)網(wǎng)站和PC網(wǎng)站使用同一個(gè)域名，不同的設(shè)備訪問的時(shí)候，看到的是各自的網(wǎng)站。

1、在網(wǎng)站head標(biāo)簽里加跳轉(zhuǎn)語句

要實(shí)現(xiàn)網(wǎng)站根據(jù)訪問設(shè)備自動(dòng)識別展示手機(jī)站或PC站這個(gè)功能，需要以下幾個(gè)步驟：

（1）、你得有一個(gè)PC端，在電腦上訪問的官方網(wǎng)站，比如：www.mahaixiang.cn。

（2）、你需要重新制作一個(gè)移動(dòng)端的手機(jī)網(wǎng)站（具體可查看億企邦《手機(jī)網(wǎng)站制作的常用方法及優(yōu)化技巧》的相關(guān)介紹），比如：m.mahaixiang.cn。

（3）、在PC端的網(wǎng)站上加上一段代碼，每個(gè)頁面都需要加上，放在PC端網(wǎng)站head標(biāo)簽里面，代碼如下：

//平臺、設(shè)備和操作系統(tǒng)
var system = {
win: false,
mac: false,
xll: false
};
//檢測平臺
var p = navigator.platform;
system.win = p.indexOf(“Win”) == 0;
system.mac = p.indexOf(“Mac”) == 0;
system.x11 = (p == “X11″) || (p.indexOf(“Linux”) == 0);
//跳轉(zhuǎn)語句
if (!(system.win || system.mac || system.xll)) {//轉(zhuǎn)向電腦界面
window.location.href = “http://m.mahaixiang.cn”;
}

（4）、進(jìn)入域名解析系統(tǒng)，做一個(gè)別名cname解析，比如：你手機(jī)網(wǎng)站制作公司給的地址123.域名.com解析到m.mahaixiang.cn域名解析系統(tǒng)。

2、根據(jù)移動(dòng)終端和瀏覽器版本信息判定的語法

還有一些站長或SEO可能會考慮到移動(dòng)終端的版本和瀏覽器版本信息，對此，億企邦也為大家整理了一段比較有效的代碼，如下所示：

<script type="text/javascript">
var browser={
versions:function(){
var u = navigator.userAgent, app = navigator.appVersion;
return {//移動(dòng)終端瀏覽器版本信息
trident: u.indexOf('Trident') > -1, //IE內(nèi)核
presto: u.indexOf('Presto') > -1, //opera內(nèi)核
webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內(nèi)核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐內(nèi)核
mobile: !!u.match(/AppleWebKit.*Mobile.*/)||!!u.match(/AppleWebKit/), //是否為移動(dòng)終端
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 && u.indexOf('Macintosh') < 0), //是否為iPhone或者QQHD瀏覽器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1 //是否web應(yīng)該程序，沒有頭部與底部
};
}(),
language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
if (browser.versions.ios||browser.versions.android||browser.versions.iPhone||browser.versions.iPad) {
self.location=http://www.mahaixiang.cn;
}
</script>

3、自動(dòng)識別手機(jī)頁面、iPad頁面和wap頁面

可以根據(jù)不同的終端類型適當(dāng)?shù)母淖冋齽t表達(dá)式，這段代碼添加到需要識別的網(wǎng)頁，會根據(jù)客戶端的類型自動(dòng)跳轉(zhuǎn)到手機(jī)頁、平板頁或其他移動(dòng)設(shè)備頁面，非常的靈活！

<script type="text/javascript">
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|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
window.location.href="http://www.mahaixiang.cn/m";
}else if(/iPad/i.test(navigator.userAgent)){
window.location.href="http://www.mahaixiang.cn/pad";
}else{
window.location.href="http://www.mahaixiang.cn/wap"
}
}catch(e){}
}
}
</script>

4、使用PHP語言來識別

對于一些精通PHP語言的博友來說，也可以通過PHP語法來實(shí)現(xiàn)，比如以下的寫法：

//設(shè)定Mobile的定義
$mobileAgent = array("iphone", "ipod", "ipad", "android", "mobile", "blackberry", "webos", "incognito", "webmate", "bada", "nokia", "lg", "ucweb", "skyfire");
//讀取用戶的瀏覽器資料
$browser = $_SERVER['HTTP_USER_AGENT'];
$isMobile = false;
//檢查開始
foreach($mobileAgent as $search){
if(stristr($browser,$search)!=false){
$isMobile = true;
//echo $search;
//程式碼(轉(zhuǎn)址)
header("Location: http://www.mahaixiang.cn/m/index.html");
//停止運(yùn)行程序
exit;
}
}
?>

5、做個(gè)自動(dòng)識別的效果

經(jīng)過多次測試，我們也可以做個(gè)自動(dòng)識別的效果，方法很簡單，在你需要自動(dòng)跳轉(zhuǎn)的頁面加入以下代碼：

<script type="text/javascript">
var mobileAgent = new Array("iphone", "ipod", "ipad", "android", "mobile", "blackberry", "webos", "incognito", "webmate", "bada", "nokia", "lg", "ucweb", "skyfire");
var browser = navigator.userAgent.toLowerCase();
var isMobile = false;
for (var i=0; i<mobileAgent.length; i++){ if (browser.indexOf(mobileAgent[i])!=-1){ isMobile = true;
//alert(mobileAgent[i]);
location.href = 'http://siteapp.baidu.com/webapp/mahaixiang.cn#m/http://mahaixiang.cn/';
break; } }
</script>

6、自動(dòng)識別移動(dòng)端適配跳轉(zhuǎn)網(wǎng)址的代碼

手機(jī)版的網(wǎng)站需要簡單，以文字為主，才能很好的兼容，可以在網(wǎng)站的首頁設(shè)置一個(gè)程序來判斷用戶是手機(jī)端還是電腦，如果是手機(jī)端，直接中轉(zhuǎn)到手機(jī)端，如果是電腦端，直接中轉(zhuǎn)到電腦端（大家也可以使用百度提高的百度移動(dòng)搜索開放適配服務(wù)，具體可查看億企邦《百度移動(dòng)搜索開放適配服務(wù)的3種方法》的相關(guān)介紹）。

對此，大家可以在網(wǎng)站的首頁插入入下代碼：

<script type="text/javascript">　　
function browserRedirect() {　　
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 || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) ){　　
window.location.href=B頁面;　
}
}　
browserRedirect();　
</script>
<script type="text/javascript">uaredirect("<A href='http://www.mahaixiang.cn/wap/","http://www.mahaixiang.cn/index.html");http://www.mahaixiang.cn/wap/","http://www.mahaixiang.cn/index.html");
</script>

在億企邦看來，PC版網(wǎng)頁自動(dòng)識別手機(jī)客戶端并跳轉(zhuǎn)，用js進(jìn)行判斷是否手機(jī)客戶端進(jìn)行跳轉(zhuǎn)最好，特別是靜態(tài)網(wǎng)頁，把這個(gè)過程通過js的方式放在用戶客戶端執(zhí)行，可以大大減少服務(wù)器端額外處理的壓力，但是有時(shí)需要通過在服務(wù)器端進(jìn)行判斷的情況除外。

億企邦點(diǎn)評：

隨著移動(dòng)互聯(lián)網(wǎng)的降臨，移動(dòng)網(wǎng)站已經(jīng)一發(fā)不可收拾，PC端和移動(dòng)端官網(wǎng)并存也逐漸成為一大趨勢，提前為自己的網(wǎng)站設(shè)置好自動(dòng)識別，無論是從SEO的角度或者用戶體驗(yàn)的角度，都有很大的好處。