浏览器和操作系统作为身体类别 [英] Browser & OS as body class

问题描述

我希望在body类中包含OS和Browser.我需要像素完美的样式，因为在不同的OS/浏览器配置中，字体的行为方式不同.经过一些谷歌搜索和实验.我唯一想到的方法是使用indexOf ...

I would like to have the OS and the Browser in the body class. I need that for pixelperfect styling, because the fonts do not behave the same way in different OS / Browser configurations. After some googling and experimenting. The only way i could think of to do this was to use an indexOf...

var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";

var agt=navigator.userAgent.toLowerCase();
if (agt.indexOf("opera") != -1) return 'Opera';
if (agt.indexOf("firefox") != -1) return 'Firefox';
if (agt.indexOf("safari") != -1) return 'Safari';
if (agt.indexOf("webkit") != -1) return 'Webkit';
if (agt.indexOf("msie") != -1) return 'Internet Explorer';
if (agt.indexOf("mozilla/5.0") != -1) return 'Mozilla';

我认为这不是一个非常漂亮的解决方案.有一些正则表达式可以做到这一点吗?还是有更快的方法可以做到这一点?

i think its not a very beautyful solution. Is there some regex that could do this? Or is there any faster way to do this?

推荐答案

您可以使用regex，但不会使其更漂亮.

You could use regex, but it wouldn't make it any prettier.

基本上，扫描用户代理字符串以获取浏览器/操作系统/版本永远不会.

Basically, scanning user agent strings for browser/os/version is never going to be beautiful.

这对jQuery来说有点漂亮...

Here is something a little prettier with jQuery...

// Add some classes to body for CSS hooks

// Get browser
$.each($.browser, function(i) {
    $('body').addClass(i);
    return false;  
});


// Get OS
var os = [
    'iphone',
    'ipad',
    'windows',
    'mac',
    'linux'
];

var match = navigator.appVersion.toLowerCase().match(new RegExp(os.join('|')));
if (match) {
    $('body').addClass(match[0]);
};

这与上面的类不太相同，但是足以区分不同的操作系统和浏览器.

This doesn't quite give you the same classes as above, but enough to differentiate different OS and browser.

例如，您可以使用...针对Windows上的Firefox

For example, you could target Firefox on Windows with...

body.windows.mozilla {
    background: blue;
}

看到它！

或使用插件.

这篇关于浏览器和操作系统作为身体类别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！