1

I have a web application that is being used by browsers on desktop, tablet and phone. A toolbar (made in HTML) when used on tablet and desktop needs to have buttons that are 16 x 16, and then 48 x 48 on phones. The reason for this, is that 16 x 16 comes up as a good size on the desktop and tablet, but too small on phones (iPhone 4/4s, etc). 48 x 48 is too big on desktop and tablet, but perfect on the phones we've tested.

How can I do the necessary detection for this using Javascript?

I imagine that detecting the physical screen size in inches or millimeters would be a good way to go. Is this possible from within the browser? I've seen some information about detecting screen resolutions in pixels, but to me that seems flawed because the resolution boundaries between phone and tablet are blurring.

What is the most reliable method for detecting a tablet from inside the browser?

We are testing using an iPad 2, Android tablet and the Android Emulator.

Kara
  • 5,650
  • 15
  • 48
  • 55
John Mills
  • 9,390
  • 11
  • 69
  • 113
  • 1
    You probably care about screen width, not device type. – SLaks May 11 '12 at 03:04
  • 1
    See this page – PitaJ May 11 '12 at 03:07
  • @SLaks - Yes, being the physical width, not the number of pixels. – John Mills May 11 '12 at 03:07
  • @GiddyUpHorsey—physical size is irrelevant and not available anywhere. Dimensions in pixels are relevant. They're not directly related to physical size, but give a hint. – RobG May 11 '12 at 03:19
  • 1
    Instead of reinventing the wheel take a look at responsive frameworks such as Twitter's [Bootstrap](http://twitter.github.com/bootstrap/) or Zurb's [Foundation](http://foundation.zurb.com/). – furtive May 11 '12 at 04:06
  • @furtive - That's pretty cool. It would be nice to use those, but the web application may need a major overhaul to take advantage of those frameworks and their grid layouts - something I cannot do unfortunately. I'm hoping a small amount of Javascript (or the like) can be used as the fix. – John Mills May 11 '12 at 04:19

3 Answers3

2

CSS3 media queries work well for identifying device-widths (meaning screen-width) and there are some interesting techniques for hooking into them with JavaScript that Jeremy Keith has been toying around with that he discusses in this post from his journal. The general idea is that he puts a non-rendering css rule inside the media query then retrieves that css value via JavaScript to determine which media query is in effect. This identifies the device width ranges which you can then draw conclusions from about what kind of device you're displaying on.

kinakuta
  • 8,819
  • 1
  • 34
  • 48
1

The media query solution is a good one, but in case you do not want to integrate CSS into the solution and as your questions stated, use JS (only), you should be able to use JavaScript to detect if the device is a tablet vs. a phone. This can be done by detecting the default orientation using window.orientation in combination with the ratio of screen width to height. 

if (window.oriention == 0){            // this is the device's default orientation
    if (screen.width > screen.height) //means  default orientation is landscape
        isPhoneFormFactor = false;
}

The logic is that the default orientation for a device who's width is greater than it's height is most likely a tablet and not a mobile phone device.

To make it even more accurate, you should calculate the ration of screen width to height and ensure it surpasses a certain threshold to make the assumption more accurate and allow you to add a bit more logic to be even more so.

Bamerza
  • 1,294
  • 1
  • 17
  • 32
  • This doesn't work. I made a testfile and put it on http://conijnwebdesign.nl/tutorials/client-info.php. Tests with an iPad2 (iOS7) and an Android phone (4.1) both returned 'could not be detected'. – Frank Conijn Jun 11 '14 at 09:38
0

Originally I thought that what I needed to know was what kind of device the web application was running on, and then I moved on to thinking that I needed to know the physical screen size of the device. I now think that it is actually the DPI of the device that is relevant.

On a low resolution device such as a desktop monitor (typically well below 150 DPI) or an iPad 2 (132 DPI), the 16 x 16 buttons is a good size, but on a high resolution device such as an iPhone with retina display (326 DPI), the 48 x 48 buttons are better suited because 16 x6 16 shows up way too small.

Using Modernizr with it's .mq() function for running media queries, you can determine the device's screen resolution with Javascript code.

var isHighResolutionDisplay = Modernizr.mq("screen and (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 250dpi)");

This page has a great list of many different devices and their pixel density.

John Mills
  • 9,390
  • 11
  • 69
  • 113
  • Is DPI the right metric? Set your viewport `` and I think mobile will suddenly become much larger and make DPI irrelevant – gman May 13 '15 at 15:00