-2

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 On my 1080p Laptop This is on my laptop it's fine (1080p) This is on surface 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.

Barkermn01
  • 6,781
  • 33
  • 83
  • Hi, first, you can check if you are on touch device by trying to create a `TouchEvent`. Second if you are on touch device check the screen width. – Yoplaboom Jul 13 '16 at 14:54
  • But the screen width is the problem i need the Screen DPI to do the full calulation to work out how big there screen is. – Barkermn01 Jul 13 '16 at 15:47
  • @T.J Crowder this is not a duplicate of that im asking a very different thing that you have marked as duplicate of a Question that i posed to you based on your answer that provide evidence you answer is not suitable – Barkermn01 Jul 13 '16 at 16:01
  • @MartinBarker: No, that's exactly what you've said you want to do in the comments on that answer: Detect the physical size of the screen so you can decide whether it will work for your site. That's what that question addresses. If the comments on that answer are correct, then A) My answer here doesn't help, and B) The answers there do, to the extent it's possible. – T.J. Crowder Jul 13 '16 at 16:09
  • No it's not that's what i asked to you when your answer lent that way with media queries my question is pertaining to just wanting to know if its possible to detect tablets from mobiles. – Barkermn01 Jul 13 '16 at 16:10
  • @MartinBarker: (Hint: I am trying to *help you* here.) Step back from it a minute: You don't really care whether they're tablets or mobiles. You care how big their screens are, according to the comments on my answer, which is the only real difference between a tablet and a phone. Consider: An iPad mini's screen is 7.9"; a Samsung Galaxy W phone is 7". Do you really think your site will work on the iPad Mini and not on the Galaxy W? My guess is it works on both, or neither. – T.J. Crowder Jul 13 '16 at 16:14
  • and that is an edge case same as my Note 3 most android or iPhone have screens around 5 to 7 inch and most tablets are around 9 to 12 inch and. the long term aim is to have a completely different system for mobiles. – Barkermn01 Jul 13 '16 at 16:19
  • So i do care how big there screens are but also the resolution there capable of there will always be edge cases that i just cant support for. but phones tend to lean more to the smaller screen bigger resolution. hence why i don't want phones to be support as technology gets better this will occur more and more preventing me from using screen size as such proving its not possible to use the screen size as a measurement. so i need to detect if its a phone or tablet without screen size. – Barkermn01 Jul 13 '16 at 16:22

2 Answers2

0

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.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • The issue is the whole interface is designed for larger screens i really would not want to support anything less than 10 inch as the system would be come unusable as items would be to small for user experience – Barkermn01 Jul 13 '16 at 15:40
  • @MartinBarker: So there you are, use media queries to show the main interface when the screen is big enough, and a message on smaller screens. – T.J. Crowder Jul 13 '16 at 15:41
  • I might be mistaken here but don't media query or any from of screen size use resolution so Width and Height when i would need Width Height and DPI to build a calculation to equate if there screen is big enough. – Barkermn01 Jul 13 '16 at 15:46
  • @MartinBarker: Frankly I'd just pick a number of pixels that works for the design and leave people to worry about the physical size themselves. Different people perceive "too small" and "too big" ***very*** differently, anything you do will be wrong to a fair number. – T.J. Crowder Jul 13 '16 at 15:51
  • No this would be way to small to be used. i will upload pic – Barkermn01 Jul 13 '16 at 15:53
0

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.

atomless
  • 1,272
  • 15
  • 18
  • This is the exact problem im trying to prevent, iPad and Samsung Galaxy Tab and my Note 3 and Galaxy S6 would all match true to both but i don't want the Note 3 or S6 to match there screens are just to small to do this... – Barkermn01 Jul 13 '16 at 15:43
  • Until you find a solution that proves what you need is actually doable without constructing an exhaustive list of every single navigator agent you want to allow then I really don't think it's right of you to mark down the sole answer to your request for help that makes any attempt to provide some constructive assistance. – atomless Jul 14 '16 at 13:18
  • i did not vote you down someone else did i left a comment and was waiting for a response. but thanks for your update it's close to what is needed but resolution is not the best thing for my site. I might just have to check for touch and if it's Windows if so allow it. and then build app for tablets only. – Barkermn01 Jul 15 '16 at 12:48
  • cool, I hope you get it all working. – atomless Jul 15 '16 at 14:19