Javascript / jQuery detect mobile from Tablet

Question

So I'm trying to work out if this is even possible or if not possible what have others manage to do to try and identify if any.

So i need a method in Javascript to allow Tablet Computers but not mobile phones and here in this lies the problem most detection for mobile or tablets group them together by using the UserAgent however for both android tablets and phones will match for a mobile or tablet detection how do i distinguish between them.

so i need something that i can do something like

if(!isMobile() || isMobile() && isTablet()){
   // allow the system to load and work
}else{
   // Display notice system does not support mobiles currently.
}

Pictures of interface on differing devices This is on my laptop it's fine (1080p) this is on my surface (3000x2000)

Please note: i had not even though of using screen size until it was provided as an answer and upon further thought it is not possible to use screen size as screen size detection is not possible correctly.

My Primary Question is it possible to obtain the difference between Tablet and Mobile.

Answer 1

Mobile phones are, in many ways, just small tablets; or tablets are just large mobiles. So rather than focussing on the category, which is arbitrary, focus on the thing that keeps you from supporting mobiles.

If it's an issue with screen size, detect screen size.

If it's an issue with speed of connection, detect speed of connection — or just let the user be the judge of what's fast enough.

Etc.

Answer 2

I would suggest changing isTablet to isTouch and using something like these two functions:

function isTouch() {
  return ('ontouchend' in window)? 'true' : 'false';
}
function isMobile() {
  if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)) {
    return true;
  }
  return false;
}
function hasRequiredResolution(required_res) {
    return (window.screen.height * window.screen.width) >= required_res;
}

Update: I've added a method to return true or false depending on whether the connecting client has the desired resolution. This should enable you to identify the clients you want to target.