Detect tablet or desktop user

I plan to have a completely separate layout/design for a desktop Vs tablet user. My app is based on Java. My questions are; 1. What is the best approach to detect whether the request is coming from desktop or tablet (iPad/Xoom, etc) 2. Can this be handled at server-side and not through JS user-agent string?

A live example of redirect is if one tries to access Yahoo. i.e. if the r开发者_如何学编程equest comes from a desktop browser, we’ll be redirected to www.yahoo.com , while if the request comes from a tablet device like iPad, we’ll be redirected to www.yahoo.com/tablet I am planning something along the Yahoo example. Not sure how they have implemented it.

I know some of you might be thinking that I should just control 2 separate CSS like desktop.css and tablet.css and detect through CSS media query OR JS user-agent. But the point is the layout/design is so different between the 2 that I just cannot control only via CSS and that is the reason, I plan to have a separate tablet version of my web app and do the redirection.

Please let me know as much suggestions that you can.

Thanks in advance for your help on this.

You have to check for the user-agent string within your HTTP request. Based on that you will be able to identify the device -- provided that the user has not altered the user-agent string sent from the device browser.

I've had to deal with pretty much the same issue, having to differantiate between Desktop or Not-Desktop. I went with a client-side detection using JavaScript. I'm using RequireJS in my solution, and here's my module:

define(function(){
    var isTouchDevice = function() {  return window.screenX === 0 && 'ontouchstart' in window || 'onmsgesturechange' in window; };
    var isDesktop = !isTouchDevice() ? true : false;
    return isDesktop;
});

I've added the variable isDesktop for readability.