想要通過js獲取手機(jī)的一些基本參數(shù)爆捞，就要使用到navigator.userAgent，通過我們可以獲取到瀏覽器的一些基本信息把敢。如果想在頁(yè)面中看到navigator.userAgent內(nèi)容斜姥，我們可以使用document.write(navigator.userAgent);打印到頁(yè)面上，可以更清晰的看到具體內(nèi)容煮盼。
1、下面是我打印的一些手機(jī)中的userAgent內(nèi)容：
1带污、iphone6 plus
Mozilla/5.0 (iPhone; CPU iPhone OS 10_2_1 like Mac OS X) AppleWebKit/602.4.6 (KHTML, like Gecko) Mobile/14D27
iphone7 plus
Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Mobile/14E304
2僵控、魅族
Mozilla/5.0 (Linux; Android 5.1; m1 metal Build/LMY47I) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/40.0.2214.127 Mobile Safari/537.36
3、三星
Mozilla/5.0 (Linux; Android 6.0.1; SM-A8000 Build/MMB29M; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/55.0.2883.91 Mobile Safari/537.36
4鱼冀、小米
Mozilla/5.0 (Linux; Android 6.0.1; Redmi Note 4X Build/MMB29M; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/55.0.2883.91 Mobile Safari/537.36
從上面我們可以看出iphone的里面都含有iPhone字段报破，系統(tǒng)版本字段為上面標(biāo)紅的地方悠就。2、3泛烙、4是幾款A(yù)ndroid手機(jī)的userAgent內(nèi)容理卑，仔細(xì)觀察不難發(fā)現(xiàn)Android 5.1等就是系統(tǒng)版本翘紊。而藍(lán)色的就是手機(jī)型號(hào)蔽氨。至于其他內(nèi)容，包含瀏覽器版本等帆疟，這里不做解釋鹉究。如果想知道這個(gè)userAgent內(nèi)容的具體含義和來(lái)源可以參考如下地址查看具體解釋：
為什么所有瀏覽器的userAgent都帶Mozilla
2、在網(wǎng)上查了下有木有現(xiàn)成的js能直接實(shí)現(xiàn)此功能踪宠，找到了一個(gè)mobile-detect.js自赔。基本可以實(shí)現(xiàn)我們需要的參數(shù)柳琢，下載地址：
https://github.com/hgoebl/mobile-detect.js/
文檔地址：
http://hgoebl.github.io/mobile-detect.js/doc/MobileDetect.html
使用方法：
// 引入CDN
<script src="https://lib.baomitu.com/mobile-detect/1.4.5/mobile-detect.min.js" charset="utf-8" ></script>
var md = new MobileDetect(
'Mozilla/5.0 (Linux; U; Android 4.0.3; en-in; SonyEricssonMT11i' +
' Build/4.1.A.0.562) AppleWebKit/534.30 (KHTML, like Gecko)' +
' Version/4.0 Mobile Safari/534.30');
// more typically we would instantiate with 'window.navigator.userAgent'
// as user-agent; this string literal is only for better understanding
console.log( md.mobile() ); // 'Sony'
console.log( md.phone() ); // 'Sony'
console.log( md.tablet() ); // null
console.log( md.userAgent() ); // 'Safari'
console.log( md.os() ); // 'AndroidOS'
console.log( md.is('iPhone') ); // false
console.log( md.is('bot') ); // false
console.log( md.version('Webkit') ); // 534.3
console.log( md.versionStr('Build') ); // '4.1.A.0.562'
console.log( md.match('playstation|xbox') ); // false
使用過程中ios沒有什么問題绍妨，想獲取的都可以獲取到，不過Android并不是都能獲取到柬脸。所以又對(duì)Android的做了單獨(dú)處理他去。發(fā)現(xiàn)Android手機(jī)型號(hào)后面都帶了一段Build/... ，所以就以此做了下單獨(dú)處理倒堕，來(lái)獲取Android手機(jī)型號(hào)灾测。下面是具體代碼：
/**
* 獲取設(shè)備和系統(tǒng)信息
* @returns environment
*/
export function getMobSysInfo() {
Array.prototype.contains = function (needle) {
for (i in this) {
if (this[i].indexOf(needle) > 0) return i
}
return -1
}
let device_type = navigator.userAgent //獲取userAgent信息
let md = new MobileDetect(device_type) //初始化mobile-detect
let os = md.os() //獲取系統(tǒng)
let model = ''
if (os == 'iOS') {
//ios系統(tǒng)的處理
os = md.os() + md.version('iPhone')
model = md.mobile()
} else if (os == 'AndroidOS') {
//Android系統(tǒng)的處理
os = md.os() + md.version('Android')
let sss = device_type.split(';')
var i = sss.contains('Build/')
if (i > -1) {
model = sss[i].substring(0, sss[i].indexOf('Build/'))
}
}
return {
os,
model
}
}
當(dāng)然，這并不百分百準(zhǔn)確和可靠垦巴。媳搪。如果不需要非常嚴(yán)謹(jǐn)?shù)臉I(yè)務(wù)已經(jīng)夠用
