Detect phone vs tablet

I think you're making a fundamentally arbitrary distinction between tablet, phone, or any other web enabled device here. It seems like the physical dimensions of the screen is the metric you want to use to dictate the content you serve.

In this case I would try to implement logic based on values passed by the user agent in the HTTP headers ([mobiforge.com...]) and degrade gracefully to prompting the user if information isn't available.

Your logic might look a bit like this:

• If the user agent supplies a physical screen size in HTTP headers
  physical dimensions = UA value.
  
• otherwise, if the user agent supplies a resolution and pixel dimensions
  physical dimensions = pixel dimensions divided by resolution.
• (optionally) otherwise, use client side script to detect resolution and PPI
• otherwise, if the user agent string looks like some kind of mobile device (regex)
  prompt the user to select.
• otherwise
  assume a default option.

---

Update: My answer is now three years old. It's worth noting that support for responsive design has progressed significantly and its now common to deliver the same content to all devices and rely on css media queries to present the site in a way that is most effective for the device it is being viewed on.

Based on google's suggestion: found here (also referenced by Greg) this is what I have used in projects before.

if (/mobile/i.test(navigator.userAgent) && !/ipad|tablet/i.test(navigator.userAgent)) {
    console.log("it's a phone"); // your code here
}

It's maybe not the most elegant solution... but it does the job.