JS判斷移動設備最佳方法 并實現跳轉至手機版網頁

ffc8 9年前發布 | 258K 次閱讀 JS 前端技術

 

我在開發的Magento或Wordpress主題時，通過都會制作手機版本，為了實現某個片段在手機端和桌面端不同功能，又或者如果是手機設備，就跳轉到指定的網頁上，那么這里就需要用到JS來做判斷了，下面有一個簡單的檢測方法，經試驗是可行的。

JS判斷移動設備最佳方法 并實現跳轉至手機版網頁

方法一：純JS判斷

使用這方法既簡單，又實用，不需要引入jQuery庫，把以下代碼加入到<head>里即可。 

<script type=”text/javascript”>
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
window.location = “mobile.html”; //可以換成http地址
}
</script>

方法二：使用 Device.js 庫

device.js 是一個用于檢查設備用的插件，使用它你可以很方便的判斷設備的操作系統，以及設備是縱向還是橫向。

首先，我們下載Device.js

下載地址： https://github.com/matthewhudson/device.js

STEP 1: 引入 JS 文件 

<script src=”device.min.js”></script>

STEP 2: 加入判斷代碼 

<script type=”text/javascript”>
if(device.mobile()){
window.location = “shouji.html”;  //可以換成http地址
}
</script>

Device.js 方法有很多，若你想實現對某個設備的判斷，要以根據以下代碼來替換device.mobile()。

JS判斷移動設備最佳方法 并實現跳轉至手機版網頁

以上兩種方法判斷手機端都是很實用的，由其是電腦版網頁和手機版網頁分別用不同的網站域名時，使用該方法可以免去用戶記2個域名煩惱！

參考閱讀：http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery

 本文由用戶 ffc8 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！