找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发Js判断浏览器是手机访问还是PC访问

2018-12-20 分类：JavaScript 阅读(879) 评论(0)
微信小程序开发需要分前端后端吗
微信公众号前端开发代码
微信 前端开发

JavaScript是如何判断移动设备的类型呢？答案是：User Agent。

什么是User Agent？懂一点网页制作的人应该都明白。简单的说，User Agent就是用来识别浏览器名称、版本、引擎以及操作系统等信息的内容。

User Agent的判断是识别浏览器的关键，不仅仅如此，移动互联网开发势头迅猛，通过User Agent判断桌面端设备或移动设备就变的很为重要。当然，通过User Agent也可以用来改善一定的兼容性，比如判断得到用户用IE6浏览器那么就是用不同的代码。
javascript 代码

<script type=”text/javascript”>
    var browser = {
        versions: (function() {
            var u = navigator.userAgent,
                app = navigator.appVersion
            return
        })(),
        language: (
            navigator.browserLanguage || navigator.language
        ).toLowerCase(),
    }
    document.writeln(‘语言版本: ‘ + browser.language)
    document.writeln(‘ 是否为移动终端: ‘ + browser.versions.mobile)
    document.writeln(‘ ios终端: ‘ + browser.versions.ios)
    document.writeln(‘ android终端: ‘ + browser.versions.android)
    document.writeln(‘ 是否为iPhone: ‘ + browser.versions.iPhone)
    document.writeln(‘ 是否iPad: ‘ + browser.versions.iPad)
    document.writeln(navigator.userAgent)
</script>

另附PC浏览器类型UserAgent判断的函数
javascript 代码

<script language=”javascript”>
    var explorer = navigator.userAgent,
        browse
    if (explorer.indexOf(‘MSIE’) >= 0) {
        //ie
        browse = ‘ie’
    } else if (explorer.indexOf(‘Firefox’) >= 0) {
        // firefox 火狐
        browse = ‘Firefox’
    } else if (explorer.indexOf(‘Chrome’) >= 0) {
        //Chrome 谷歌
        browse = ‘Chrome’
    } else if (explorer.indexOf(‘Opera’) >= 0) {
        //Opera 欧朋
        browse = ‘Opera’
    } else if (explorer.indexOf(‘Safari’) >= 0) {
        //Safari 苹果浏览器
        browse = ‘Safari’
    } else if (explorer.indexOf(‘Netscape’) >= 0) {
        //Netscape
        browse = ‘Netscape’
    }
</script>

已经测试通过的代码如下：

javascript 代码

<script type=”text/javascript”>
    //var userBrowser = navigator.userAgent.toLowerCase();
    //if(userBrowser.indexOf(‘android’) || userBrowser.indexOf(‘iphone’)){
    // document.getElementById(“a”).style.display=”block”;
    //}else{
    // document.getElementById(“a”).style.display=”none”;
    //}
    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(),
    }
    if (
        browser.versions.mobile ||
        browser.versions.ios ||
        browser.versions.android ||
        browser.versions.iPhone ||
        browser.versions.iPad
    ) {
        document.getElementById(‘a’).style.display = ‘none’
    } else {
        document.getElementById(‘a’).style.display = ‘block’
    }
</script>
微信公众号前端开发sdk
微信开发前端接口文档
前端 微信小程序开发
赞(0)
前端开发者 » 前端开发Js判断浏览器是手机访问还是PC访问
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论