Web Dev

How to: Change website CSS based on the device OS using JavaScript

By 29th October 2012 2 Comments

CSS can be very cruel sometimes especially when you are targeting different operating systems  running different web browsers and trying to make sure the site looks the same in all. I have been stuck in this situation for a while and without knowing how to fix it, I turned to JavaScript to fix things. JavaScript is good at fixing CSS issues.

The website I have been working on works fine on Windows PCs with all browsers, but when I tried the site on a Mac all of the line spacing had gone weird. I first thought, oh this must be a Mac issue. Then I tried the site on my Android phone and it was exactly the same. My work around for this using jQuery is as follows:

 function CorrectBrowserCSS() {
if (navigator.userAgent.indexOf('Windows') == -1)
$('body').addClass('non-win');
}

Personally, I am not a big fan of this at all but it was the only work around I could think of at the time. What this does is checks if the user is browsing the website on a non Windows PC and if it is, then it will then add the “non-win” class to the body of the website. You can then style everything that is wrong in the site by adding ‘.non-win p’ for example to change the style of the <p> element when the PC isn’t Windows. The only problem with this is when JavaScript is disabled and this doesn’t get called. I will have to think about that and try to fix that too…

Join the discussion 2 Comments

Leave a Reply