現(xiàn)在很多網(wǎng)站都是分為兩個版本,一個pc端的一個移動端的(響應(yīng)式除外),針對這兩個版本,就需要對訪問的設(shè)備進行判斷,如果是pc,就直接訪問pc網(wǎng)站,否則就訪問移動端網(wǎng)站。
對于這個問題可以通過判斷UA來解決,前端js可以判斷,后端判斷也行,這里我們主要討論的是如何通過js來處理。
假如我們有一個網(wǎng)站,pc端通過www.test.com訪問,而移動端通過m.test.com來訪問。我們需要做的就是當移動端訪問www.test.com時可以直接跳轉(zhuǎn)到m.test.com。此時我們只需這樣處理就可以了,在頁面頭部加入如下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ù)情況下不止這么簡單地直接從www.test.com跳轉(zhuǎn)到m.test.com。我們網(wǎng)站除了主機名部分,后面跟的還有,比如:www.test.com/list/98/,對于這樣一個url,PC就直接這樣訪問了,對于移動端,需要通過m.test.com/list/98/才可以呈現(xiàn)出比較好的效果。
那么,此時就可以用正則來處理,當移動端訪問時,我們把“http://www”替換為“http://m”(冒號為英文冒號),然后更新頁面就可以看到頁面在移動端上呈現(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,以上就是移動端及PC端網(wǎng)站訪問的問題。