Is this acceptable code to redirect mobile users?

[someprivatetime]

After looking through many pages showing fairly large chunks of JS code (of which I am not fluent) I found this very very short code block which appears to work after a quick test from a Desktop and Mobile device. Is this good enough to use for a non-enterprise site?

Thanks for any help! :)

Comments

[hipmaestro]

That code verbatim won't be as accurate as it could be. Many mobile browsers' UA strings don't contain the word "Mobile", and the iPad's UA string does, even though it can accommodate a non-mobile site.

http://en.wikipedia.org/wiki/List_of_user_agents_for_mobile_phones

It seems to me that the underlying code is fine; you just need to add conditions to account for other things, like ["Mobile" or "BlackBerry" or "Android"] and not "iPad".

[someprivatetime]

Thanks for the quick reply hipmaestro!

When I mentioned not being fluent in JavaScript I was sadly being generous to myself as I've never actually slung a single line of JS before, so I had to do a bunch of learning between last night and now. I attempted lots of variations, starting with a switch block, but couldn't get anything to work until I scrapped it and went simplistic:

I just fear that this will get too unwieldy should I try to cover too many user agents. Am I headed in the wrong direction using boolean IF constructs?

I probably don't need to support too many user agents as this is an Apple-Centric support page, but I would like to cover the majors, and then likely add a link to the mobile version for those that i miss ... it's just that really hackish/sloppy code rubs me wrong, so I'd like to do it right.

Thanks again for any tips!

[hipmaestro]

Since it's only really unwieldy because of the repetition, you can factor out that repetition into a function:

function has(substr) {
    return navigator.userAgent.indexOf(substr) >= 0;
}

That way, instead of this:

if (navigator.userAgent.indexOf("iPod") != -1 || navigator.userAgent.indexOf("iPhone") != -1) {
    window.location = "http://Domain.com/mobile.html"
}

You can do this:

if (has("iPod") || has("iPhone")) {
    window.location = "http://Domain.com/mobile.html"
}
That way you can add more conditions without it being overwhelming. When you're done, you can even put the whole shebang inside another function that accepts the mobile URL as an argument:

function ifMobile(url) {
    function has(substr) {
        return navigator.userAgent.indexOf(substr) >= 0;
    }
    if (
        (has('Mobile') && !has('iPad')) ||
        has('BlackBerry') ||
        has('Android')
    ) {
        location.href = url;
    }
}
Then use it

[someprivatetime]

Now that's elegant!

I'll play around with that, it should allow me to make a quick duplicate site with a new CSS while I try to figure out the proper solution of using multiple CSSs on a single set of pages (which I fear is not going to be quick ;) ).

Great stuff, thank you!

[shanwickoceanic]

Just wondering why you're doing this client-side (where Javascript could be turned off), instead of server-side in PHP or whatever's available? The logic's going to be broadly the same either way, but server-side seems safer.

[someprivatetime]

A very fair question... because I know even less about server side scripting, and everything I ran into online seemed to take for granted that I'd know where files were to placed, determining what environments may be running, along with all the other stuff I dont know

[shanwickoceanic]

If you understand it and it's good enough, it's good enough. Ultimately, that's what it comes down to. No sense in tearing your hair out if you have something that works.

That said, if the only difference is "an adjusted layout to be more friendly to a tiny screen", you might want to think about whether simply serving a different stylesheet could do the job, removing a whole lot of duplication. In theory, it's as simple as

In practice, you again end up with special cases and other silliness. Iphone in particular tries to be all grown up and ignores the "handheld" stylesheet. There are ways of dealing with that. Or you can take Apple's word for it that Iphone really is that good

[someprivatetime]

My CSS is just a hair better then my JS, but in the long run this may make far more sense.

It leads me to ponder further, though, is it possible to use CSS to actually hide things like images or sections in DIV tags? Part of the rearranging, was literally rearranging the page, not just formatting, but removing some DIV tags, replacing 800px header images, etc

Am I likely just thinking of new ways to hang myself?

I'll try playing around with the LINK tags to which you linked, and posted, perhaps I can make something work from there. Much appreciated!