Recognizing desktop, tablet, phone

What parameters to consider

[j_a_c_k]

I am rebuilding an old website that was designed to work on a desktop. It is a small "brochure" site with half a dozen pages. I have determined that I really want three versions to support Desktop, Tablet and Phone.

How can I best detect in which of these environments I find myself? I find lots of discussions but little guidance.

My goal is code that returns these parameters:
1) platform = Desktop or Tablet or Phone
2) orientation = landscape or portrait

[not2easy]

Because device resolution is not all the same, it is best to let the device adjust the site to its best size. People complain about being forced by coding to see a different view than they prefer. Detecting the device can serve a version that is too small to view.

For example, the iPhone 6+ has a retina display with 1920x1080 resolution at 401 PPI (pixels per inch) and a phone or tablet's pixels are not the equivalent of desktop pixels. Device pixels vary from one device to another so a good practice is to code so that the device determines the size of what they see.

I put up an article here: [webmasterworld.com...] to help folks learn the differences, along with links to more information and tools.
HTH.

[j_a_c_k]

Thank You, that is good insight but I really want to dish up different sets of images and very different layouts for each platform.

I want to keep the text the same for each version as I am serving them all up under the same set of names, so a get for http://www.example.com/index.html will serve up different layout variations and image sets but exactly the same text, depending upon the calling platform and orientation.

[edited by: not2easy at 12:54 am (utc) on Apr 4, 2015]
[edit reason] edit to unlink [/edit]

[Hoople]

What you seem to be looking for is a 'responsive images' solution. Only the most recent versions of *some* browsers have preliminary support for the current draft proposals. Expect older browsers (1-2 versions back) to only have a fallback (default) image support as provided by most of these draft responsive proposals. Will all of this sites visitors be using the latest browser nightly builds? If the answer is no then older methods might suffice.....or just get too complicated?

What you end up looking for is a hybrid browser sniffing method. Apple in their wisdom has a few smart-phones that improperly report viewport width and displayed to css pixels vary from 1:1 to 3:1. So any method you end up using will need a way to circumvent these and other vendor specific nuances.