HTML & CSS ? JS判斷移動(dòng)設備最佳方法 并實(shí)現跳轉至手機版網(wǎng)頁(yè)

JS判斷移動(dòng)設備最佳方法 并實(shí)現跳轉至手機版網(wǎng)頁(yè)

發(fā)表于: HTML & CSS, 前端開(kāi)發(fā). 評論
Sponsor

我在開(kāi)發(fā)的Magento或Wordpress主題時(shí),通過(guò)都會(huì )制作手機版本,為了實(shí)現某個(gè)片段在手機端和桌面端不同功能,又或者如果是手機設備,就跳轉到指定的網(wǎng)頁(yè)上,那么這里就需要用到JS來(lái)做判斷了,下面有一個(gè)簡(jiǎn)單的檢測方法,經(jīng)試驗是可行的。

JS判斷移動(dòng)設備 并跳轉至手機版網(wǎng)頁(yè)

方法一:純JS判斷

使用這方法既簡(jiǎn)單,又實(shí)用,不需要引入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 是一個(gè)用于檢查設備用的插件,使用它你可以很方便的判斷設備的操作系統,以及設備是縱向還是橫向。

首先,我們下載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 方法有很多,若你想實(shí)現對某個(gè)設備的判斷,要以根據以下代碼來(lái)替換device.mobile()。

以上兩種方法判斷手機端都是很實(shí)用的,由其是電腦版網(wǎng)頁(yè)和手機版網(wǎng)頁(yè)分別用不同的網(wǎng)站域名時(shí),使用該方法可以免去用戶(hù)記2個(gè)域名煩惱!

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

推薦:查看最受歡迎的 301 個(gè)設計網(wǎng)站 → http://hao.shejidaren.com
交流:為設計新人提供的設計交流群,請加入UI設計交流群,分享經(jīng)驗、接單、求職、聊設計。
贊助商鏈接
贊助商鏈接
設計達人微信交流社區:shejidaren888
喜歡這篇文章嗎?歡迎分享到你的微博、QQ群,并關(guān)注我們的微博,謝謝支持。
版權:除非注明,本站文章均為原創(chuàng )文章,轉載請聯(lián)系我們授權,否則禁止轉載。

{ 發(fā)表評論 }