<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <title>判断是什么浏览器</title>

    <link rel="stylesheet" href="base.css">

</head>

<body>

    <div  class="box">

        我这里是按钮

    </div>

</body>

</html>

<script>

    var userAgent = navigator.userAgent; // 取得浏览器的userAgent字符串

    console.log(userAgent)

    var isFirefox =  navigator.userAgent.indexOf('Firefox') > -1  // 是否是火狐  ，火狐内核Gecko

    console.log('火狐'+ isFirefox)  // 返回 true  则是 ，false  则不是

    var isWebKit =  navigator.userAgent.indexOf('WebKit') > -1  // 是否是WebKit 内核

    console.log('谷歌内核'+ isWebKit)  // 返回 true  则是，false  则不是

    var isChrome =  navigator.userAgent.indexOf('Chrome') > -1  // 是否是谷歌

    console.log('谷歌'+ isChrome)  // 返回 true  则是 ，false  则不是

    var isOpera =  navigator.userAgent.indexOf('Opera') > -1  // 是否是opera ， opera内核 Presto

    console.log('Opera'+ isOpera)  // 返回 true  则是 ，false  则不是

    var isTrident =  navigator.userAgent.indexOf('Trident') > -1  // 是否是IE内核

    console.log('IE内核'+ isTrident)  // 返回 true  则是 ，false  则不是

    var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1  && !isOpera

    console.log('IE '+ isIE)  //判断是否IE浏览器

    //  因为ie10-ie11的版本问题，不再支持document.all判断，所以ie判断函数要重新写

    var isIeL = !!window.ActiveXObject || "ActiveXObject" in window

    console.log('IELLQ '+ isIeL)  //判断是否IE浏览器

    var isIE9 = navigator.userAgent.indexOf("MSIE 9.0")>0

    console.log('IE999 '+ isIE9)  //判断是否IE9  ;如果是其他IE版本，则 MSIE 7.0   MSIE 8.0

    // 判断是否为移动端

    var browser = {

        versions: function() {

            var u = navigator.userAgent;

            return {

            trident: u.indexOf('Trident') > -1, //IE内核

            presto: u.indexOf('Presto') > -1, //opera内核

            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核

            gecko: u.indexOf('Firefox') > -1, //火狐内核Gecko

            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

            iPhone: u.indexOf('iPhone') > -1 , //iPhone

            iPad: u.indexOf('iPad') > -1, //iPad

            webApp: u.indexOf('Safari') > -1 //Safari

        };

    }()

}

var isPhone = browser.versions.mobile || browser.versions.ios || browser.versions.android || browser.versions.iPhone || browser.versions.iPad

console.log('是否为移动端' +isPhone )

// JS判断浏览器是否是IE9以下，处理可能遇到的兼容性问题

if(navigator.appName == "Microsoft Internet Explorer"&&parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE",""))<9){

        console.log("您的浏览器版本过低，请使用IE9及以上版本");

}

</script>

js 判断是什么浏览器、是否为谷歌浏览器的更多相关文章

  1. H5案例分享：使用JS判断客户端、浏览器、操作系统类型

    使用JS判断客户端.浏览器.操作系统类型 一.JS判断客户端类型 JS判断客户端是否是iOS或者Android手机移动端 通过判断浏览器的userAgent,用正则来判断手机是否是ios和Androi ...

  2. JS判断是否微信浏览器

    JS判断是否微信浏览器 function isWeixinBrowser(){ var ua = navigator.userAgent.toLowerCase(); return (/microme ...

  3. JS判断不同的浏览器，不同的浏览器版本

    JS判断不同的浏览器,不同的浏览器版本

  4. 用js判断操作系统和浏览器类型

    判断操作系统和浏览器的js代码 navigator.userAgent:userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值.    navigator.pla ...

  5. js判断用户的浏览器设备是移动端还是pc端

    最近做的一个网站页面中需要根据用户的访问设备的不同来显示不同的页面样式,主要是判断移动设备还是电脑浏览器访问的. 下面给出js判断处理代码,以作参考. <script type="te ...

  6. JS判断客户端、浏览器、操作系统

    一.JS判断客户端是否是iOS或者Android手机移动端 通过判断浏览器的userAgent,用正则来判断手机是否是ios和Android客户端. 方法一: var u = navigator.us ...

  7. 使用JS判断客户端、浏览器、操作系统类型

    一.JS判断客户端类型 JS判断客户端是否是iOS或者Android手机移动端 通过判断浏览器的userAgent,用正则来判断手机是否是ios和Android客户端. 核心代码如下: 方法一: &l ...

  8. js判断操作系统与浏览器

    摘要: 对于前端开发我们最重要的工作就是兼容性,系统的兼容性,浏览器的兼容性等等.今天分享一个我在项目中封装的判断操作系统与浏览器的方法. 操作系统: var os = (function() { v ...

  9. js 判断是什么浏览器加载页面

    一.Navigator 属性: 1)appcodeName  返回浏览器代码名 2)appminorVersion  返回浏览器次级版本 3)appname  返回浏览器名称 4)browserLan ...

随机推荐

  1. C++多态性：虚函数的调用原理

    多态性给我们带来了好处:多态使得我们可以通过基类的引用或指针来指明一个对象(包含其派生类的对象),当调用函数时可以自动判断调用的是哪个对象的函数. 一个函数说明为虚函数,表明在继承的类中重载这个函数时 ...

  2. visualstudio Team Foundation Server 使用教程

    一.前沿 Team Foundation Server 是我们开发者使用最多的源代码管理工具.由于自己服务器搭建拉取工作慢的缘故,我使用了微软的 TFS.使用非常方便.快捷.免费.且不公开私有的项目. ...

  3. fitnesse（gradle构建）安装步骤

    1.安装jdk.ant.gradle(参考http://www.cnblogs.com/274914765qq/p/4401525.html) 2.下载Fitnesse https://github. ...

  4. node-sass安装失败

    1. 直接安装报错(版本根据自己需求来) npm i node-sass@ -D 报错不能下载 win32-x64-64_binding.node Downloading binary from ht ...

  5. 51nod1086(多重背包＆二進制)

    題目鏈接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1086 題意:中文題誒- 思路:很顯然這是一道多重背包題,不過這 ...

  6. 求无向图的割点和桥模板(tarjan)

    一.基本概念 1.桥:若无向连通图的边割集中只有一条边,则称这条边为割边或者桥 (离散书上给出的定义.. 通俗的来说就是无向连通图中的某条边,删除后得到的新图联通分支至少为2(即不连通: 2.割点:若 ...

  7. 大数据技术之_27_电商平台数据分析项目_02_预备知识 + Scala + Spark Core + Spark SQL + Spark Streaming + Java 对象池

    第0章 预备知识0.1 Scala0.1.1 Scala 操作符0.1.2 拉链操作0.2 Spark Core0.2.1 Spark RDD 持久化0.2.2 Spark 共享变量0.3 Spark ...

  8. VRTK3.3.0-001头盔相机

    VRTK3.3.0下载地址:https://github.com/ExtendRealityLtd/VRTK/tree/3.3.0 SteamVR1.2.3下载地址:https://github.co ...

  9. 慕课笔记-Java入门第二季

    1.java对象的使用 (1)创建对象 类名 对象名=new 类名(); (2)使用对象 引用对象的属性:对象名.属性; 引用对象的方法:对象名.方法(); Note: ①Java会给成员变量赋初始值 ...

  10. 子div块中设置margin-top时影响父div块位置的解决办法及其原因

    解决办法①: 若子DIV块中使用margin-top,则在父DIV块中添加:overflow:hidden; 解决办法②: 在子DIV块中用padding-top代替margin-top. 有个叫 b ...