-6

I am not interested in Tablets or mobile devices. Just if the user is visiting the page with a phone.

I am not looking for something 100% perfect. But a best effort would be nice. If I show a sms 'a' tag link and you are NOT on a phone... it's not the end of the world but I would like to do the best I can.

Any ideas on how to specifically try to filter out for phones even if it is not 100% perfect?

Thanks

slindsey3000
  • 3,433
  • 4
  • 26
  • 52
  • 3
    Possible duplicate: http://stackoverflow.com/questions/11381673/detecting-a-mobile-browser – Evan Bechtol Mar 16 '16 at 15:17
  • The above link detects mobile browsers. I am just looking for phones. Exclude all else. – slindsey3000 Mar 16 '16 at 15:18
  • It's one and the same thing, @slindsey3000 , how do you think they are visiting your site if not from the browser? – Evan Bechtol Mar 16 '16 at 15:19
  • A tablet is clearly different from a phone. If it not possible to specifically look for a phone that could be an accepted answer. I have no interest anything except phones. – slindsey3000 Mar 16 '16 at 15:20
  • 1
    The answer talks specifically about detecting only smaller viewing devices; phones. – Evan Bechtol Mar 16 '16 at 15:21
  • 2
    Check Out this link . May be it can help you http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery?rq=1 – Kartikeya Sharma Mar 16 '16 at 15:21
  • 1
    In @slindsey3000's defence, most of the existing answers are looking at the more generic detecting of a mobile browser *not* a mobile phone which is a subtly different issue. Mobile browser detection will also detect tablets, etc. so the question seems valid enough to me and perhaps undeserving of so many down votes! – Matt McDonald Mar 16 '16 at 15:26
  • 2
    @MattMcDonald Right, this is another question but OP shows no effort what he/she tried and is just asking for "give me teh codez!". – A1rPun Mar 16 '16 at 15:28
  • Something should be set in the headers to distinguish phones. There are things that phones can do that other 'screens' can't. Example: send an SMS text. I want to know that I am on a phone. No biggie. Someone should solve this. It's not gonna be me though. kthxbai – slindsey3000 Mar 16 '16 at 16:04

3 Answers3

2

There are perhaps a couple of approaches you could take to this - both would be making massive assumptions and be unreliable at best!

The first approach would be a responsive media query. You could presume that a mobile phone has a screen size greater than x and less than y. For example:

@media only screen and (min-width: 320px) and (max-width: 600px) {}

I'd improve on that to also check for a height, and find some statistics on common device sizes to put sensible breakpoints in there. You also need to account for device orientation, when a device is landscape orientated it'll be wider than usual.

Your other option is to use the user-agent string. Both Apple and Android devices specifically state if it's a mobile version of the device. On iOS you can look for the phrase 'iphone'. On android you can look for 'mobile safari'. Windows phone, and other devices likely have similar detects, you'd need to use emulators to examine each UA string and then construct a suitable regex.

A final possibility, if you're interested specifically in the device's ability to handle telephone operations might be to run a detect against a telephone number.

Create an element on the page that contains a phone number. In iOS (and likely similarly on other platforms), this will get modified so it has an automatic href added with tel: and then your number. You could draw this element off screen, see if the number gets auto-formatted, and presume a mobile phone if so. I imagine an iPad will also do this, but then an iPad will also allow you to send SMS if you have text message forwarding enabled.

Matt McDonald
  • 4,361
  • 2
  • 30
  • 51
-1

I'd suggest doing it server side if you want to manipulate the view for the end user, however I wrote a small JS library that enables this sort of checking a while back - take a look: https://github.com/dj10dj100/what_browser

Along other things you'll be able to check if the browser is a mobile using js : if(what.device.isMobile() == true){ //Mobile device }

dj10dj100
  • 185
  • 1
  • 12
  • 1
    Your isMobile detect would fail on a larger phone that was landscape orientated. And if a future device (e.g. smartwatch) comes along with a very small screen, it would also be detected as a mobile. – Matt McDonald Mar 16 '16 at 15:42
  • Ahh yes, it'd fail on a larger screen size - so would the previous answers using a media query. Also I think a new smaller device would most likely use a different User-Agent string if it had a web-browser enabled? – dj10dj100 Mar 16 '16 at 15:55
  • Perhaps - but there's a good chance it would contain one of the words you're checking for in _any – Matt McDonald Mar 16 '16 at 16:17
-2
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // some code..
}
Umair Khan
  • 280
  • 3
  • 13