[筆記] 判斷瀏覽器為手機端還是 PC 端的方法

章節連結

當使用者瀏覽你的網頁時,有時會需要去判斷視窗的寬度大小來決定畫面的呈現。除了可以用 window.addEventListener 的 resize 事件外,還可以使用 window.navigator.userAgent 的方法來判定。這邊筆記一下內容和包裝成函式來使用。
browsersync chrome


內容

1. 若印出 window.navigator 其下的所有內容,你其實可以查閱到更多的資料。不過若要判斷手機端或 PC 端,用 window.navigator.userAgent 內的一長串字串內是否有包含相關文字來判定即可。
-vue-mobile-pc-browser-detect-001

-vue-mobile-pc-browser-detect-003 -vue-mobile-pc-browser-detect-002
由上而下分別為:電腦端、Android 手機端、iPhone 手機,你可以發現裏頭都有一些關鍵字

程式碼

用一個函式包裝即可,如下:

 

按讚加入粉絲團

延伸閱讀