Here javascript may well be the worst of all possible approaches-- and that's speaking as someone who uses js as a word processor, as a generic programming tool, and doubtless many other things that God never intended js to do.

By its nature javascript doesn't execute until it arrives in the user's browser. So your mobile user ends up having to download everything twice-- whether they want to or not, even if they're on a plan that makes you pay through the nose for data.

If you must use UA detection, do it on the server side so the user never even loads up the full-scale version. But why not offer the user a choice? Link to "our mobile site" and remember this decision in a cookie for future visits.

whether or not it could cause problems with older browsers

You mean, ancient desktop browsers running in machines narrower than 499px? I don't think they exist; the original Mac was 512x384 and that takes us back a good many decades. Besides, browsers that old probably don't even understand "screen.width". Got a vague idea MSIE 7 didn't.

And, ahem, you don't really mean /index.html ;) On two accounts, come to think of it. Would this script appear on every page? Then they need to get redirected to the mobile version of the current page, not to the front page all over again. I think there's even something in google's guidelines about this.

Thanks for your comments lucy24. If I placed the javascript at the beginning of the head section would it execute before the rest of the page loaded? I understand that Google recommends using CSS to deliver the mobile version but I'm not happy about that idea for the same reason; my desktop-optimised pages are quite successful as they are but weigh in at around 100 to 150k each and I understand that they would still download even if I used display:none.

Incidentally I would redirect the existing index page to a mobile subdomain index page which would not contain links to any of the other pages. This is because the index page is the one that gets 99% of hits and is the one that a mobile visitor will find the most important by far.

and I understand that they would still download even if I used display:none

Right. I confirmed this by experiment once. If you say

element {background-image: huge picture here;}
@media rule for mobiles
element {display: none;}

the background image still loads up. You have to change the last part to

element {background-image: none; display: none;}

Do you have access to any aspect of the server? If it's an automatic redirect, I don't understand why it isn't done server-side, for example with a RewriteRule. Admittedly one reason is that only javascript can do width detection-- and there are hundreds of mobile UAs out there! But you can pick up an awful lot of them just by saying something like

(iP|Android|Blackberry)

with tangential discussion on whether iPads want a mobile site or not