1

Hi this question seems silly. but currently i am stucked cause of it.

Actually i am not able to determine "mobile or tablet" in javascript I have two css 1. for mobiles 2. for tablets

its quite easy in ios devices. using user-agent, i can determine iphone or ipad and accordingly able to include required css.

but in android, i am not able to determine. i know it is possible if i know actual dimension(inches) of devices. But it is not possible in javascript because of Physical dimension are the part of hardware domain.

may be another way could be using device "Aspect ratio". but still don't know way to differentiate mobiles, tabs and notes.

help me please, is there any way to differentiate android mobile tablets and notes?

mayur
  • 206
  • 2
  • 15
  • Maybe could help the X-WAP-Profile http header on the server side. By the way why do you want to detect that? I mean relevent is online the size of the display I normally just put another layout for a other screensize. [Here](http://stackoverflow.com/questions/10080451/android-detect-small-tablet-vs-big-phone) they are talking about the density. I read somewhere that there is a way to read it by js. – rekire Nov 25 '12 at 12:18

2 Answers2

2

What your question comes down to is: What is a tablet? With iOS it is easy to decide what is a phone and what is not, because Apple draws the line for us. But with so many different devices running android, it is much harder.

You wrote that you created two stylesheets, so you probably have the best idea of where to draw the line. My guess is that you want to have at least a certain number of pixels in the width of the screen to call it a tablet. So, what you could use for detection:

if (window.outerwidth<920) {
  // phone
}
else {
  // tablet
}

You asked for a JavaScript way to detect, but I don't think it is a good solution to your problem. What you probably really want to look at are media queries as discussed in "Media Queries: How to target desktop, tablet and mobile?".

To be comprehensive, here is how you can detect iDevice, android or HP Tablet (from iScroll 4).

var isAndroid = (/android/gi).test(navigator.appVersion),
isIDevice = (/iphone|ipad/gi).test(navigator.appVersion),
isTouchPad = (/hp-tablet/gi).test(navigator.appVersion);
Community
  • 1
  • 1
davidpfahler
  • 606
  • 4
  • 7
  • problem will arise when there is pixel density come into the picture. Like micromax funbook P350 returns 800x480 which consider as in phones and galaxy S3 will return 1280x720 which has higher resolution than ipad. that's why i mentioned physical dimension. – mayur Nov 26 '12 at 04:58
  • @mactroop did you check my answer? There you can check the density. – rekire Nov 26 '12 at 17:48
0

Related to detect small tablet vs big phone? and Optimising for High Pixel Density Displays. You can check the device density with this code:

var dpr = 1;
if(window.devicePixelRatio !== undefined) dpr = window.devicePixelRatio;

To check if the display is bigger or equal to a variable size you can use this function:

/**
 * Checks if the screen size is equal or above given length
 * @param screen_size diagonal size of screen, for example 7.0 inches
 * @return True if its equal or above, else false
 */
function checkScreenSize(screen_size) {
    var dpr = 1;
    if(window.devicePixelRatio !== undefined) dpr = window.devicePixelRatio;
    var width=window.outerWidth/dpr;
    var height=window.outerHeight/dpr;
    var screenDiagonal = Math.sqrt(width * width + height * height);
    return screenDiagonal >= screen_size;
}
Community
  • 1
  • 1
rekire
  • 47,260
  • 30
  • 167
  • 264