現(xiàn)在很多網(wǎng)站都是分為兩個(gè)版本,一個(gè)pc端的一個(gè)移動(dòng)端的(響應(yīng)式除外),針對(duì)這兩個(gè)版本,就需要對(duì)訪問(wèn)的設(shè)備進(jìn)行判斷,如果是pc,就直接訪問(wèn)pc網(wǎng)站,否則就訪問(wèn)移動(dòng)端網(wǎng)站。
對(duì)于這個(gè)問(wèn)題可以通過(guò)判斷UA來(lái)解決,前端js可以判斷,后端判斷也行,這里我們主要討論的是如何通過(guò)js來(lái)處理。
假如我們有一個(gè)網(wǎng)站,pc端通過(guò)www.test.com訪問(wèn),而移動(dòng)端通過(guò)m.test.com來(lái)訪問(wèn)。我們需要做的就是當(dāng)移動(dòng)端訪問(wèn)www.test.com時(shí)可以直接跳轉(zhuǎn)到m.test.com。此時(shí)我們只需這樣處理就可以了,在頁(yè)面頭部加入如下js代碼:
(function () {
var url = location.href;
// replace www.test.com with your domain
if ( (url.indexOf('www.test.com') != -1) && navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i) ) {
location.href = 'http://m.test.com';
}
})();
但是,多數(shù)情況下不止這么簡(jiǎn)單地直接從www.test.com跳轉(zhuǎn)到m.test.com。我們網(wǎng)站除了主機(jī)名部分,后面跟的還有,比如:www.test.com/list/98/,對(duì)于這樣一個(gè)url,PC就直接這樣訪問(wèn)了,對(duì)于移動(dòng)端,需要通過(guò)m.test.com/list/98/才可以呈現(xiàn)出比較好的效果。
那么,此時(shí)就可以用正則來(lái)處理,當(dāng)移動(dòng)端訪問(wèn)時(shí),我們把“http://www”替換為“http://m”(冒號(hào)為英文冒號(hào)),然后更新頁(yè)面就可以看到頁(yè)面在移動(dòng)端上呈現(xiàn)的效果了。具體代碼如下:
(function () {
var url = location.href;
// replace www.test.com with your domain
if ( (url.indexOf('www.test.com') != -1) && navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i) ) {
var newUrl = url.replace('http://www', 'http://m');
location.href = newUrl;
}
})();
Ok,以上就是移動(dòng)端及PC端網(wǎng)站訪問(wèn)的問(wèn)題。