原文:https://segmentfault.com/q/1010000002507636
純網頁開發的話用一下這個方法,我只是簡單的用來根據不同的手機型號來做一些css樣式的修改了。
Navigator 對象包含有關瀏覽器的信息
appVersion 返回瀏覽器的平台和版本信息
userAgent 返回由客戶機發送服務器的user-agent頭部的值
.indexOf()方法用來檢測字符串值在字符串中首次出現的位置
var events = navigator.userAgent; console.log(navigator.userAgent); console.log(navigator.appVersion); console.log(navigator) if(events.indexOf('Android')>-1 || events.indexOf('Linux')>-1 || events.indexOf('Adr')>-1){ console.log("安卓手機"); }else if(events.indexOf('iPhone')>-1){ //根據尺寸進行判斷 蘋果的型號 if(screen.height == 812 && screen.width == 375){ console.log("蘋果X"); }else if(screen.height == 736 && screen.width == 414){ console.log("iPhone7P - iPhone8P - iPhone6"); }else if(screen.height == 667 && screen.width == 375){ console.log("iPhone7 - iPhone8 - iPhone6"); }else if(screen.height == 568 && screen.width == 320){ console.log("iPhone5"); }else{ console.log("iPhone4"); } }else if(events.indexOf('Windows Phone')>-1){ console.log("諾基亞手機"); }else if(events.indexOf("iPad")>-1){ console.log("平板"); }
或者可以用 window.screen.width 通過瀏覽器檢測屏幕的寬度來判斷這個值屬於哪個手機尺寸范圍