Question

我想在body类中使用操作系统和浏览器。我需要用于像素完美样式，因为字体在不同的OS /浏览器配置中的行为方式不同。经过一些谷歌搜索和实验。我能想到的唯一方法是使用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';

我认为这不是一个非常美丽的解决方案。是否有一些正则表达式可以做到这一点？或者有更快的方法吗？

Answer 1

你可以使用正则表达式，但它不会让它变得更漂亮。

基本上，扫描浏览器/ os /版本的用户代理字符串永远不会变得漂亮。

这是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]);
};

这并没有给你与上面相同的类，但足以区分不同的操作系统和浏览器。

例如，您可以使用...

在Windows上定位Firefox

body.windows.mozilla {
    background: blue;
}

See it!

Or use a plugin.

Answer 2

对于浏览器信息，如果使用jQuery，则有$.browser

http://api.jquery.com/jQuery.browser/

浏览器＆amp;操作系统作为身体类

2 个答案: