检测浏览器类型并应用相关样式

时间:2014-07-03 14:58:06

标签: javascript php mysql css

我为我的公司构建了一个“内部”Web应用程序,主要使用我公司的几个部门使用的PHP / MySQL。

我设计了网站(我天真地想),以便使用Chrome和Firefox可以很好地工作并且看起来很棒。直到最近,这并不是问题,因为每个使用它的人都在使用这些浏览器。

但是,新的部门已添加到用户列表中,他们都使用旧版本的IE,他们无权在自己的计算机上升级或安装任何软件。我发现了一两个问题,但结果并不多。

我希望能够检测某人正在使用的浏览器并相应地应用特定样式。

我不是最好的JavaScript,但我想这将是如何完成的?但是如何?

5 个答案:

答案 0 :(得分:0)

你可能正在寻找类似的东西:

    var navigator = function (){
        var ua= navigator.userAgent, tem, 
        M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*([\d\.]+)/i) || [];
        if(/trident/i.test(M[1])){
            tem=  /\brv[ :]+(\d+(\.\d+)?)/g.exec(ua) || [];
            return 'IE '+(tem[1] || '');
        }
        M= M[2]? [M[1], M[2]]:[navigator.appName, navigator.appVersion, '-?'];
        if((tem= ua.match(/version\/([\.\d]+)/i))!= null) M[2]= tem[1];
        return M.join(' ');
    };
//usage
//IE < 10
        if(navigator()[0] == "I" && navigator().match(/\d+/) < 10){
            alert('You are using '+navigator+'.Please update to version >= 10');
        }

答案 1 :(得分:0)

您可以强制IE加载兼容模式。请使用您正在寻找的I.E 8版本。 使用以下内容:

<meta http-equiv="X-UA-Compatible" content="IE=8">

试一试。您可以根据自己的要求更改版本。

答案 2 :(得分:0)

将其放在head

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

更多信息:http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

或使用自定义构建的modernizr进行特征检测,然后再进行浏览器检测:

http://www.modernizr.com

答案 3 :(得分:0)

您可以在HTML中检查用户是否使用IE

<!--[if IE]>
Place styles here for IE (so all your scripts and links to stylesheets and scripts)
<![endif]-->

要恢复其他风格:

<!--[if !IE]>
Place styles here for not IE (so all your scripts and links to stylesheets and scripts that you were using before)
<![endif]-->

您需要在同一文档中同时使用这两种内容,以确保样式不会相互冲突。

http://www.mediacollege.com/internet/html/detect/detect-ie.html

答案 4 :(得分:0)

你最好的选择就是像其他人提到的那样使用两种不同的风格元素,一种用于IE,另一种用于非IE:

<!--[if IE 8]>
  <link rel="stylesheet" type="text/css" href="./css/blahblah-ie8.css"/>
<![endif]-->

<!--[if !IE 8]>
    <link rel="stylesheet" type="text/css" href="./css/blahblah.css"/>
<![endif]-->

您可以定位单个版本的IE或所有版本

<!--[if IE 8]><!--[if IE]>

您可能想要的另一件事是在浏览器中根本不支持您的应用程序时警告用户。因此,作为企业软件,webapp可能只支持FF,Chrome和IE - 你不希望用户堵塞你的服务台,询问Opera或Maxthon中出现问题的原因。

为此,我使用了一开始加载的Javascript,它检测用户代理并在屏幕顶​​部显示一个浮动div,显示一条消息,指出用户可以使用浏览器但是它不受支持。