浏览器和操作系统作为body类

Question

浏览器和操作系统作为body类

4

我希望将操作系统和浏览器添加到body类中，这样可以进行像素级别的样式设计，因为在不同的操作系统/浏览器配置下，字体表现方式不同。经过一些搜索和尝试，我想到唯一的方法是使用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';

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

- meo

如果你真的想使用浏览器嗅探技术，祝你好运 - 这种方法总会失败，因为渲染还取决于安装的字体和浏览器版本（尤其是IE6 vs IE7 vs IE8 vs 即将推出的IE9）。如果你需要一个像素完美的网站，HTML不是实现这个目标的正确工具 - 相反，把你的网站做成一个巨大的图像，这是唯一可以保证像素完美的方式（它会有许多其他问题，但它将是像素完美的）。此外，UA欺骗。 - Piskvor left the building

对我来说，问题更多地是操作系统而不是浏览器。在 MacOS 和 Windows 中，文本渲染非常不同。我总是惊讶于 Windows 中字体看起来有多丑陋。但至少我可以分别控制行高、字母间距和字体大小。但如果设计师具备 Web 经验，完全可以像素完美地实现它。 - meo

2个回答

0

关于浏览器信息，如果使用jQuery，可以使用$.browser

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

- nonopolarity

是的，但这完全是相同的事情，你必须检查每个浏览器并返回一个值... - meo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- alex · Accepted Answer

你可以使用正则表达式，但它不会使代码更美观。

基本上，扫描用户代理字符串来获取浏览器/操作系统/版本信息是永远不会变得优雅的。

这里有一个使用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;
}

点击查看!

或者使用插件。