JS 判斷終端使用的是Android還是iOS
阿新 • • 發佈:2019-01-10
js判斷ios系統還是android系統 並修改元件樣式
- 在跨平臺、瀏覽器、移動裝置相容的時候,要根據終端裝置的瀏覽器核心做特定調整,判斷Android還是iOS,通過
navigator.userAgent.toLowerCase() 可以進行判斷。
- navigator是HTML中的內建物件,包含瀏覽器的資訊;userAgent是navigator的屬性方法,可以返回由客戶機發送伺服器的頭部的值,作用其實就是就是返回當前使用者所使用的是什麼瀏覽器,toLowerCase()是將轉換為小寫。
export default { methods: { check() { let styleElement = document.getElementById('scrollContainer'); let ua = window.navigator.userAgent.toLowerCase(); if (ua.indexOf("android") !== -1) { alert('android'); styleElement.style.cssText = " height: calc(100vh - 80px);"; } else { alert('ios'); styleElement.style.cssText = " height: calc(100vh - 160px);"; } }, }, created() { setTimeout(() => { this.check(); }, 5); }, };
- 可以看到在vue初始化created()函式中,使用了延時,由於vue在初始化時,DOM還未生成,$el屬性還不存在(詳情參考vue生命週期函式),不能例項化style樣式,通過setTimeout()延時函式等vue的生命週期結束再載入即可修改樣式。