Switching stylesheet with Javascript based on browser

Question

I'm currently trying to edit a website for a client which uses Adobe Contribute so it uses a different stylesheet if the user is browsing from a mobile phone. The mobile phone stylesheet is much simpler and strips out background images and styles to reduce load time. I understand it would be better practice to have a completely seperate website for the mobile, but this is not practical for the client as he needs to be able to update his websites content using Contribute.

This is working in some devices already such as the iPhone (last time I tested!) but on my Android phone I have a strange problem. When I visit the URL or click on a link, it displays the website using the default stylesheet. If I refresh the page it then decides to show the site rendered with the mobile stylesheet. It is almost as though the UserAgent is not being picked up by my code until I click refresh.

Here is the code I am using:

<link href="css/style.css" id="stylesheet" rel="stylesheet" type="text/css" />

<script type="text/javascript">
    var userAgent = navigator.userAgent;

    if(userAgent.search("Mobile")>=0) document.getElementById("stylesheet").href = "css/style_mob.css";

    if(userAgent.search("Nokia")>=0) document.getElementById("stylesheet").href = "css/style_mob.css";

    if(userAgent.search("SymbianOS")>=0) document.getElementById("stylesheet").href = "css/style_mob.css";
</script>

The script only shows for a few devices but you get the general idea.

My User Agent string is as follows:

Mozilla/5.0 (Linux; U; Android 2.1-update1; en-gb; T-Mobile_G2_Touch Build/ERE27) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17

EDIT:

I should add that I have tried to use media queries but this does not work at all on either the iPhone or Android. The code above works a treat on the iPhone. Below is the code I am using when trying to have this work with media queries.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="../css/style.css" id="stylesheet" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="../css/style_mob.css" />

Answer 1

Can´t you use media queries to determine what stylesheet the browser must use? Checking for individual user agents seems the wrong way to go about it.

Edit: I just noticed the media queries code you are using and I noticed you are using a different path: css/style_mob.css when using the javascript and ../css/style_mob.css. Is that a typo or could it be the reason it's not working?

Answer 2

Phone browsers cache pages just like desktop browsers do. Before you spend too much time looking into the problem, make sure it's not a caching issue.

Clear the cache on your phone and visit the URL again. Since the CSS loads correctly after a refresh, I wouldn't be surprised if this solved everything.

Also, you mention in your question that it's better to have a separate domain altogether. I say not necessarily. There are many reasons why you would only want to have 1 domain for every platform. @media queries and responsive web design can go great ways. If you are interested in the subject, you should definitely check out this article from A list apart. It could give you an idea of what the possibilities are.

EDIT:

If it still doesn't work (which it doesn't seem to) then perhaps you should test your user agent code. Instead of loading your style.css style for everyone, remove that statement, and make it conditional to a browser not being android :

Remove the css line from your html :

<link href="css/style.css" id="stylesheet" rel="stylesheet" type="text/css" />

And then in your javascript :

var normalCss = document.createElement('<link href="css/style.css" id="stylesheet" rel="stylesheet" type="text/css" />');
var mobileCss = document.createElement('<link href="css/mobile.css" id="stylesheet" rel="stylesheet" type="text/css" />');

if(userAgent.search("Android")>=0){
    document.getElementsByTagName("head")[0].appendChild(mobileCss);
}
else {
    document.getElementsByTagName("head")[0].appendChild(normalCss);
}

Clear your cache and test it. Does it load a css the first time or does it load a page without styles?

If it doesn't load the first time, this might mean that the javascript code isn't run on time. How are you calling it? Is it in the head section? Are you using jQuery with $(document).ready or something like that?

Answer 3

I have found a workaround for the problem of the android browser not loading a mobile css stylesheet unless you refresh the page. I call this a work around and not a permanent solution because I have one website where android loads the mobile css on the first try without a problem using:

<link media="handheld, only screen and (max-device-width: 480px)" href="mobile.css" type="text/css" rel="stylesheet" />

But I have another website that uses the same code above to load the css and the android browser refuses to use it unless I refresh the page. I have tried changing many parts of the html to match the website that does work but all to no avail. So here is the workaround code:

<link media="handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="mobile.css" type="text/css" rel="stylesheet" />

“handheld” allows older mobile phones to load mobile.css

“only screen and (max-width: 480px)” forces android devices to load mobile.css on the first try if they have a width of 480px or less.

“only screen and (max-device-width: 480px)” allows new blackberry phones, iphones and USUALLY android devices to load mobile.css if they have a width of 480px or less

Windows mobile 7 phones with IE do not use the new media tags so you have to use this code to get them to load mobile.css:

<!--[if IEMobile 7]>
<link rel="stylesheet" type="text/css" href="mobile.css" media="screen" />
<![endif]-->