JS判斷移動設備最佳方法 并實現跳轉至手機版網頁
我在開發的Magento或Wordpress主題時,通過都會制作手機版本,為了實現某個片段在手機端和桌面端不同功能,又或者如果是手機設備,就跳轉到指定的網頁上,那么這里就需要用到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()
。
以上兩種方法判斷手機端都是很實用的,由其是電腦版網頁和手機版網頁分別用不同的網站域名時,使用該方法可以免去用戶記2個域名煩惱!
參考閱讀:
http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery