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

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

 

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

 



相關文章

Input CSS placeholder,focus 的使用方法   首先必須要了解 Input 的基本用法以及它是什麼樣元素。 請看 此篇教學介紹 W3C Input Tag 。 Tag 是在講 input 有哪些標籤可以使用,但是只要...
HTML5 Video & Fullscreen Video 如何製作全螢幕影片?...   今天要和大家介紹 Video HTML 標籤常用的屬性以及一些時常看到全螢幕影片(Fullscreen Video)當成背景的炫泡作法喔~   要匯入一個影片...
如何自訂義動畫 Animate On Scroll   上一篇有教大家基本的 AOS Animations 使用方式,這一篇要給有需要自訂義動畫的夥伴們所使用。   基本使用方式 連結支援: 滾動到此時執行動...
CSS3增加了哪些語法?如何使用?   上篇前言跟大家說明CSS和CSS3的差別是什麼?答案是他們是密不可分的。那麼要如何使用CSS3新增的語法呢?這邊就來跟大家介紹一下CSS3增加了哪些語法以及它的使用方式喔~ &nbs...