[ 網頁教學 ] 判斷手機系統 為 iOS 或是 Android

標籤: , ,

今天要和大家分享一個JS語法,這個語法可以判斷手機的系統,在我們寫網頁的時候時常會遇到 iOS 和 Android 手機頁面長的不同的困擾,這時候就會覺得 iOS 很麻煩為什麼要這麼特立獨行,但是作為一個厲害的(X)網頁前端工程師並不能放著不管對吧?有了這樣一段的判斷式後不僅能解決不同設備的困擾也可以有更好的使用者體驗。

 

透過瀏覽器判斷手機端系統為 iOS 或是 Android

var WhatSystem = navigator.userAgent;

是 iOS

WhatSystem.match(/(iphone|ipad|ipod);?/i)

是Android

WhatSystem.match(/android/i)

 

我們可以寫成這樣的判斷式來做設定

if(WhatSystem.match(/android/i)){
  //是 Android 的話要做什麼事
  //可以在這邊寫JQ語法之類的
}else(WhatSystem.match(/(iphone|ipad|ipod);?/i)){
  //是 iOS 的話要做什麼事
}

 

如果以上滿足不了你的需求,你可以參考這篇文章,這篇文章有完善的判斷像是 iPad 與其他瀏覽器等等的。傳送門

那如果你只需要簡單的判斷手機系統為何的話以上判斷就可以幫助你在不同系統呈現的話不同囉!

 

今天的分享就到此結束,謝謝閱讀。

 



相關文章

HTML5 Video & Fullscreen Video 如何製作全螢幕影片?...   今天要和大家介紹 Video HTML 標籤常用的屬性以及一些時常看到全螢幕影片(Fullscreen Video)當成背景的炫泡作法喔~   要匯入一個影片...
CSS selector 選擇器     今天要介紹的主題是CSS選擇器,很多時候我們會寫css但是對其選擇器代表的意思卻不是非常了解,我們可能知道  "." 代表 class 或是 "#" 代表 id ,但...
CSS Animation 如何用CSS來製作動畫的效果? (下集)... 今天要繼續跟大家介紹如何使用 Animation 的屬性,沒有看過上集的你 請點我看上集 ,那麼有看過上集的人我今天就要繼續介紹囉! ▲ 介紹內容 1. animation 可以製作什麼樣的效...
如何寫SCSS#1 前言 網路上有許多關於SASS/SCSS的教學,但是我相信應該很多人依然不知道如何起手。今天就要來跟大家分享我是如何起手,如何開始使用SCSS的。因為我本人也是從網路上學習新技術,希望藉由此篇文章能夠...