手写区分PC还是手机移动端

Posted 2020-11-28 facy

区分首先要了解window.navigator

输出navigator

appCodeName: "Mozilla"
appName: "Netscape"
appVersion: "5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (Khtml, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1"
clipboard: Clipboard {}
connection: NetworkInformation {onchange: null, effectiveType: "4g", rtt: 100, downlink: 10, saveData: false}
cookieEnabled: true
credentials: CredentialsContainer {}
deviceMemory: 8
doNotTrack: null
geolocation: Geolocation {}
hardwareConcurrency: 4
keyboard: Keyboard {}
language: "zh-CN"
languages: (3) ["zh-CN", "zh", "en"]
locks: LockManager {}
maxTouchPoints: 1
mediaCapabilities: MediaCapabilities {}
mediaDevices: MediaDevices {ondevicechange: null}
mediaSession: MediaSession {metadata: null, playbackState: "none"}
mimeTypes: MimeTypeArray {length: 0}
onLine: true
permissions: Permissions {}
platform: "Win32"
plugins: PluginArray {length: 0}
presentation: Presentation {receiver: null, defaultRequest: null}
product: "Gecko"
productSub: "20030107"
serviceWorker: ServiceWorkerContainer {controller: null, ready: Promise, oncontrollerchange: null, onmessage: null, onmessageerror: null}
storage: StorageManager {}
usb: USB {onconnect: null, ondisconnect: null}
userActivation: UserActivation {hasBeenActive: true, isActive: true}
userAgent: "Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1"
vendor: "Google Inc."
vendorSub: ""
webkitPersistentStorage: DeprecatedStorageQuota {}
webkitTemporaryStorage: DeprecatedStorageQuota {}
xr: XR {ondevicechange: null}
__proto__: Navigator

cookieEnabled：cookie是否启用；如果 cookie 已启用true，否则返回 false。

appName：浏览器名称；

通常返回"Netscape" 是 IE11、Chrome、Firefox 以及 Safari 的应用程序名称的统称。

appCodeName:浏览器的应用程序代码名称；

通常返回"Mozilla" 是 Chrome、Firefox、IE、Safari 以及 Opera 的应用程序代码名称。

product：属性返回浏览器引擎的产品名称

appVersion:属性返回有关浏览器的版本信息

platform:属性返回浏览器平台（操作系统）

language:属性返回浏览器语言

onLine:属性返回 true，假如浏览器在线

userAgent:属性返回由浏览器发送到服务器的用户代理报头（user-agent header）

先看看chrome、safari、ios、android的返回值

chrome:
    Mozilla/5.0 
    (Macintosh; Intel Mac OS X 10_12_6) 
    AppleWebKit/537.36 (KHTML, like Gecko) 
    Chrome/61.0.3163.91 Safari/537.36
safari:
    Mozilla/5.0 
    (Macintosh; Intel Mac OS X 10_12_6) 
    AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 
    Safari/604.1.38
ios11刘海X:
    Mozilla/5.0 
    (iPhone; CPU iPhone OS 11_0 like Mac OS X) 
    AppleWebKit/604.1.38 (KHTML, like Gecko) 
    Version/11.0 Mobile/15A372 Safari/604.1
ipad：
    Mozilla/5.0 
    (iPad; CPU OS 9_1 like Mac OS X) 
    AppleWebKit/601.1.46 (KHTML, like Gecko)
    Version/9.0 Mobile/13B143 Safari/601.1
galxy sansum:
    Mozilla/5.0 
    (Linux; Android 5.0; SM-G900P Build/LRX21T) 
    AppleWebKit/537.36 (KHTML, like Gecko) 
    Chrome/61.0.3163.91 Mobile Safari/537.36
安装uc浏览器：
    Mozilla/5.0 
    (Linux; U; Android 6.0.1; zh-CN; Mi Note 2 Build/MXB48T)
    AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 
    Chrome/40.0.2214.89 UCBrowser/11.4.9.941 Mobile Safari/537.36
winphone:
    Mozilla/5.0 
    (Linux; Android 5.1.1; Nexus 6 Build/LYZ28E) 
    AppleWebKit/537.36 (KHTML, like Gecko) 
    Chrome/61.0.3163.91 Mobile Safari/537.36
hybrid方法的可能：
    Mozilla/5.0 
    (iPhone; CPU iPhone OS 11_0 like Mac OS X) 
    AppleWebKit/604.1.38 (KHTML, like Gecko) 
    Mobile/15A372 weibo/80011134

    var os = function() {
        var ua = navigator.userAgent,
        isWindowsPhone = /(?:Windows Phone)/.test(ua),
        isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone, 
        isAndroid = /(?:Android)/.test(ua), 
         isFireFox = /(?:Firefox)/.test(ua), 
         isChrome = /(?:Chrome|CriOS)/.test(ua),
         isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
         isPhone = /(?:iPhone)/.test(ua) && !isTablet,
         isPc = !isPhone && !isAndroid && !isSymbian;
         return {
            isTablet: isTablet,
            isPhone: isPhone,
            isAndroid : isAndroid,
            isPc : isPc
        };
     }();
     if(os.isAndroid || os.isPhone || os.isTablet){
        document.write(‘mobile‘)
     }else{
        document.write(‘pc‘);
     }

移动端返回的是：“Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Mobile Safari/537.36”

移动端有“Mobile”这个值。。PC端没有；

navigator详细说明