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开发者_Go百科?
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.
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.
For example, you could target Firefox on Windows with...
body.windows.mozilla {
background: blue;
}
See it!
Or use a plugin.
for the browser info, if using jQuery, there is $.browser
http://api.jquery.com/jQuery.browser/
精彩评论