JS如果根据UA展示不同内容？

JavaScript08

JS如果根据UA展示不同内容？,第1张

//首先将两个DIV在样式表中都设为隐藏

    var ua = navigator.userAgent.toLowerCase()

    if (/iphone|ipad|ipod/.test(ua)) {

        $(".ios").show()    

    } else if (/android/.test(ua)) {

        $(".az").show()    

    }

<script type="text/javascript">

    /**

     * [judgeOs 用户代理判断]

     * @return {[type]} [description]

     */

    function judgeOs() {

        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

        }

    },

    // 资料参考HTML5学堂

</script>

var checkSystem = function () {

    var uaMap = {

        'android': /Android/i,

        'ios': /(?:iPhone|iPad)/i

    }

    var ua = window.navigator.userAgent

    for (var i in uaMap) {

        if (uaMap[i].test(ua)) {

            return i

        }

    }

    return null

}

然后直接用

checkSystem() == 'ios'

和

checkSystem() == 'android'

判断。

或者直接这样

document.body.className = checkSystem()

这样body上就有系统的class了。

控制CSS就能控制如何显示了。