1. 程式人生 > 程式設計 >通過JS判斷網頁是否為手機開啟

通過JS判斷網頁是否為手機開啟

參考一:

//返回true表示為pc端開啟,返回false表示為手機端開啟
function check() { 
 var userAgentInfo=navigator.userAgent; 
 var Agents =new Array("Android","iPhone","SymbianOS","Windows Phone","iPad","iPod"); 
 var flag=true; 
 for(var v=0;v<Agents.length;v++) { 
   if(userAgentInfo.indexOf(Agents[v])>0) { 
    flag=false; 
    break; 
   } 
  } 
  return flag; 
 }

參考二:

簡單的利用 JS 來判斷頁面是在手機端還是在 PC 端開啟的方法(轉)

在移動裝置應用越來越廣泛的今天,許多網站都開始做移動端的介面展示,兩者螢幕尺寸差異很大,所以展示的內容也有所差別。於是就遇到一個問題,如何判斷你的頁面是在移動端還是在PC端開啟的,很簡單的問題,那我們就簡單點來說,以我們公司的官網來說,PC端和移動端的官網介面分別如下:

通過JS判斷網頁是否為手機開啟

PC

通過JS判斷網頁是否為手機開啟

手機

Navigator物件

首先來了解一下Navigator 物件,Navigator 物件包含有關瀏覽器的資訊,下面的userAgent 屬性是一個只讀的字串,聲明瞭瀏覽器用於 HTTP 請求的使用者代理頭的值。所以我們可以通過判斷navigator.useragent裡面是否有某些值來判斷,比如我的電腦是mac,所以打印出來的值為

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML,like Gecko) Chrome/56.0.2924.87 Safari/537.36

具體含義不解釋,有興趣同學自行百度,可以看到裡面含有 Mac 字樣,其他的也是類似的。

那如何判斷頁面是在移動端還是PC端開啟的呢?

網上有很多方法,寫的或難或簡單,實際上一行程式碼就夠了

window.location.href = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent) ? "https://www.baidu.com/" : http://news.baidu.com/;

以上程式碼利用了 正則表示式 和 三目運算子,含義就是如果是移動端開啟的話那就跳轉到 https://www.baidu.com/,如果不是就跳轉到 http://new.baidu.com/,這個看不懂的話,那我下面這樣寫就很容易理解了吧

if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
  window.location.href = "https://www.baidu.com/";
} else {
  window.location.href = "http://news.baidu.com/";
}

什麼?if 裡面的判斷還是看不懂?實際上就是利用正則去判斷 navigator.useragent 是否含有 Android/webOs/iphone 等字串,並且利用修飾符 " i " 做了不區分大小寫,然後用正則的方法 test 去判斷是否滿足,如果這種方式不理解的話完全可以利用字串的 indexOf 方法去判斷。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。