關於web前端開發,區別使用者使用的終端裝置程式碼

qzuser發表於2019-02-16

對web前端開發,熟知不同的瀏覽器,的解析是基本技能,下面,我就向大家展示一下,如何獲得當前使用者所用的終端裝置。車子一發動,請準備上車。。。。。。。。。。。。。。。。。。。

<script>
        //判斷客戶端的裝置
        currentLang = navigator.language; //判斷除IE外其他瀏覽器使用語言
        if(!currentLang) { //判斷IE瀏覽器使用語言
            currentLang = navigator.browserLanguage;
        }
        //判斷訪問終端
        var browser = {
            versions: function() {
                var u = navigator.userAgent,
                    app = navigator.appVersion;
                return {
                    trident: u.indexOf(`Trident`) > -1, //IE核心
                    presto: u.indexOf(`Presto`) > -1, //opera核心
                    webKit: u.indexOf(`AppleWebKit`) > -1, //蘋果、谷歌核心
                    gecko: u.indexOf(`Gecko`) > -1 && u.indexOf(`KHTML`) == -1, //火狐核心
                    mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否為移動終端
                    ios: !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端
                    android: u.indexOf(`Android`) > -1 || u.indexOf(`Linux`) > -1, //android終端或者uc瀏覽器
                    iPhone: u.indexOf(`iPhone`) > -1, //是否為iPhone或者QQHD瀏覽器
                    iPad: u.indexOf(`iPad`) > -1, //是否iPad
                    webApp: u.indexOf(`Safari`) == -1 //是否web應該程式,沒有頭部與底部
                };
            }(),
            language: (navigator.browserLanguage || navigator.language).toLowerCase()
        }

        //browser.versions.trident返回真假,真則是IE核心,以此類推browser.versions.webKit是否為谷歌核心
        if(browser.versions.iPhone) {
            alert("我是蘋果裝置");
        }
        if (browser.versions.webKit) {
            alert("我是谷歌瀏覽器");
        }
        if (browser.versions.mobile) {
            alert("我是移動端");
        }else{
            alert("我是PC端");
        };
        if(browser.versions.trident){
            alert("我是IE瀏覽器");
        }
        if (browser.versions.presto) {
            alert("我是歐朋瀏覽器");
        }
        if (browser.versions.gecko) {
            alert("我是火狐瀏覽器");
        }
    </script>

相關文章