3

I have coded few lines of java script code. But I am not sure that it is correct or not. Few months back I published a desktop version website. but when a user coming through a mobile (like android, iPhone or may be windows phone), I want to redirect a new path. Here is the code: 

// JavaScript Document
var uAgent = navigator.userAgent.toLowerCase();

if(uAgent.indexOf("android") > -1 || uAgent.indexOf("iphone") > -1 || uAgent.indexOf("windows phone") > -1) {
    window.location = "http://website path will come here.";
}

Is it the correct code?

Toon Krijthe
  • 52,876
  • 38
  • 145
  • 202
naresh kumar
  • 2,165
  • 3
  • 19
  • 21

3 Answers3

4

If you really need to detect a mobile browser (instead of making a mobile-friendly responsive layout like the Responsive template on Initializr that Just Works on mobile browsers - Google for "mobile first" and "responsive design" for more examples) then take a look at these links:

There are tons of mobile browsers - not only iPhone, Android and Windows - so if you are going to detect them then you need to do it right. See also the jQuery Mobile, a great mobile framework that will make your life easier.

rsp
  • 107,747
  • 29
  • 201
  • 177
  • it is a great resource. but all the codes are compressed. so, is there any documentation about how to use all those. – naresh kumar Sep 26 '12 at 12:13
4

That will work, but its not a great way to do this for a couple of reasons:

  1. Users with JavaScript disabled will not get redirected

  2. Mobile users (some with slow browsers and tight bandwidth limits) will download your desktop page before being redirected to the mobile site.

A better approach if possible, would be to manage this via the web server configuration ideally without any redirects at all. Alternatively, consider serving the same content to all users and changing the layout with media queries.

codebox
  • 19,927
  • 9
  • 63
  • 81
  • or you could use a small gateway page which redirects to both the desktop and the mobile version when you are sure about the user agent, and letting the user choose when the user-agent is ambigious or javascript is disabled. Allowing the user to jump between both versions at any time could also be useful in some occasions on any device. When your website loads very slowly for some reason, even desktop users could want to switch to the less bandwidth-intense mobile version and smartphone users could want to try the full version when they think their browser can handle it. – Philipp Sep 26 '12 at 12:30
  • ok. one more doubt. in the above code when i am checking the string "android", suppose it is found and the the uAgent is android, then it will work all android device. but i want different for the tablet device. For the tablet device i want show the desktop version of website. so how i will check that. any idea. – naresh kumar Sep 26 '12 at 12:48
  • The list of user agents for phones/tablets will change all the time, if you try to maintain a list yourself it will be a lot of work. I would recommend you try to find an existing framework (see links in other answers) which can do this for you. Alternatively, you could write some JavaScript which checks the screen height/width and decides based on that. – codebox Sep 26 '12 at 13:21
2
uAgent.indexOf("android") > -1

Android is not just an operating system for smartphones. It also runs on a lot of tablets which can easily handle the desktop-optimized versions of most websites. A friend of mine just complained that some websites only serve the mobile version to his GalaxyTab, even though the normal version would look well on his 10.1" screen.

You also forgot about blackberry and symbian phones.

Philipp
  • 67,764
  • 9
  • 118
  • 153