How to detect all handheld devices with separation of mobile and tablet?

Question

I can detect all handheld devices at the moment but can't separate tablet and mobile detection. I've searched lots of sources and q&a's but coudn't find a solution.

Since $.browser method removed from jQuery 1.9.1. We have to do it with native js.

Here is testing jsFiddle.

javascript:

/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? isTabletMobile = true : isTabletMobile = false;
//this works perfect

//problem starts when i try to detect difference between mobile and tablet

/iPad/i.test(navigator.userAgent) ? isTablet = true : isTablet = false;
//can't detect other tablet devices

/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? isMobile = true : isMobile = false;
//can't exclude tablet devices from here (like Android tablet devices)

if ( isTabletMobile  ) {
    alert('You are on Mobile or Tablet');
}else{
    alert('You are on Destop device');
}

if ( isTablet ) {
    alert('You are on Tablet');
}
if ( isMobile ) {
    alert('You are on Mobile');
}

Source

Answer 1

you should check the screen sizes.

try some research for most minimum size of tablets.

then if the size of device you were checking is greater than or equal to the minimum size for tablets, that means the device is a tablet.

var isDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? true : false;

var tabletMinWidth,
    tabletMinHeight;

if(isDevice){
   if(tabletMinWidth <= deviceWidth && tabletMinHeight <= deviceHeigth){
      isTablet = true
   }
}