[ 網頁教學 ] 判斷手機系統 為 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 與其他瀏覽器等等的。傳送門

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

 

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

 



相關文章

如何寫SCSS #1-1 上篇跟大家提到如何開始寫SCSS的時候有推薦一個工具,但是其實有更好的編譯方式,只要下載 VS code 的外掛就可以馬上編譯。 這款外掛就是:Live Sass Compiler 下載好VScod...
如何自訂義動畫 Animate On Scroll   上一篇有教大家基本的 AOS Animations 使用方式,這一篇要給有需要自訂義動畫的夥伴們所使用。   基本使用方式 連結支援: 滾動到此時執行動...
WordPress對應模板 每個主題基本上都會有這些模板,有些主題可能會有特殊的模板。當你需要修改模板的時候卻不知道從何改起,這篇文章可以幫助你找到你要修改的頁面是哪個模板。   ▲ 模板在哪裡? 外觀 → 主題...
Html5 Video Autoplay 影片自動播放 今天要教大家如何製作自動播放影片的網站,有些網站會直接將影片變成首頁的背景這樣的確能夠吸引使用者的注意力而且也能夠替網站創造獨有的風格。可以看到這個免費影片素材的網站 傳送門  Banner 的部分是...