簡單的利用JS來判斷頁面是在手機端還是在PC端打開的方法
阿新 • • 發佈：2018-09-29
先來 ipo com class roi ews cat www 移動設備
在移動設備應用越來越廣泛的今天，許多網站都開始做移動端的界面展示，兩者屏幕尺寸差異很大，所以展示的內容也有所差別。於是就遇到一個問題，如何判斷你的頁面是在移動端還是在PC端打開的，很簡單的問題，那我們就簡單點來說，以我們公司的官網來說，PC端和移動端的官網界面分別如下：
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 方法去判斷。
OK，就說這麽多咯！祝工作順利！
簡單的利用JS來判斷頁面是在手機端還是在PC端打開的方法