Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
emmanuelulloa

Your snippet for: mobile detection.

Recommended Posts

A client is asking me if it is possible to show different CTA's depending wether the banner is being viewed on desktop or mobile ("Learn More" or "Download App").  What is your JS snippet for detecting the environment?

Link to comment
Share on other sites

Hello emmanuelulloa,

 

I usually use something like this:

var isTouch = !!("undefined" != typeof document.documentElement.ontouchstart),
    UA = window.navigator.userAgent,
    isTouchIpad = (UA.match(/iPad/i) == "iPad");

if(isTouch === true){
	if(isTouchIpad == true){
		console.log("touch-ipad");
	}
        console.log("is-touch");
} else {
	console.log("no-touch");
}	

But keep in mind that when on Windows 8 this might not work due to the whole WIndows 8 metro and desktop view confusion. Also Firefox, IE, and Chrome will sometimes not accept the check for a touch event due to removing touch form the useragent and the way it checks a touch device on Windows 8. So keep that in minds when testing for mobile, which is usually just a check for touch support.

 

Also take into consideration that the useragent might be different when it is Windows 8 with a touch screen versus Windows 8 with no touch screen.

 

I hope this helps! :)

Link to comment
Share on other sites

Touch really isn't reliable anymore as a lot of desktops have touchscreens. I have 2 touchscreens, and it's really annoying when I go to a site and it assumes I'm on mobile, preventing my mouse from working in Chrome. 

 

Detecting mobile can be rather tricky. I've been seeing people use this crazy regex lately. It's too long to post here, but you can check it out on detectmobilebrowsers.com

 

That sure seems like overkill to me. Mozilla says you should be ok just checking for the string "Mobi" in the user agent (at the bottom of the page).

https://developer.mozilla.org/en-US/docs/Browser_detection_using_the_user_agent

 

If that's the case, then something like this...

var isMobile = /Mobi/i.test(window.navigator.userAgent);
  • Like 3
Link to comment
Share on other sites

Above i was testing for touch using feature detection which is more reliable than checking the user agent which can be spoofed. But i usually do a mix of feature detection and media query check of min-width and max-width to make sure it is a mobile device with touch support. ;)

 

Something like this also works:

var isMobile = window.matchMedia("only screen and (max-width: 760px)"),
    isTouch = !!("undefined" != typeof document.documentElement.ontouchstart);

if(isMobile.matches && isTouch) {
        // is mobile device
        console.log("is mobile and has touch support");
} else {
        // is not a mobile device
        console.log("is not mobile and has no touch support");
}

:)

  • Like 1
Link to comment
Share on other sites

Pretty much anything you test for can be faked, so here's my latest solution. Just ask the user if they are using mobile via an annoying alert box. Bonus points for triggering multiple alert boxes.

confirm("Are you on mobile?");
confirm("Are you sure?");
confirm("Are you really, really sure about this?");
  • Like 4
Link to comment
Share on other sites

Plus 10+++ for your solution Blake :)

  • Like 1
Link to comment
Share on other sites

HaHa! Love it Blake. I'm adding that to all future projects.  :)

  • Like 1
Link to comment
Share on other sites

Jonathan - congratulations - 2,000 likes! Anyone that nice and popular should be buying the pizza tonight.  :-P

  • Like 2
Link to comment
Share on other sites

Nice Craig, I didn't even notice :D.

 

I guess it's pizza party time! :)

  • Like 2
Link to comment
Share on other sites

Hi guys :)

 

If i understood correctly you need to detect devices width/height , Touch support , maybe sensors , vibrator or ... etc , right !? ...  

 

So simply you just need to check those specs for your needs .

 

otherwise what's the difference between desktop and mobile !?

Link to comment
Share on other sites

A client is asking me if it is possible to show different CTA's depending wether the banner is being viewed on desktop or mobile ("Learn More" or "Download App").  What is your JS snippet for detecting the environment?

 

It looks like he wants to prevent mobile devices from downloading something.

Link to comment
Share on other sites

  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×