[JS] [TUT] Mobile Browser Detection

Status
Not open for further replies.

Markshall

Русский Стандарт
Contributor
Dec 18, 2010
2,638
2,393
This is just a really, really simple tutorial that could be found by searching on Google or any other website that focuses on programming. But in this tutorial I am going to be showing you how to show different content to people on mobile/handheld devices such as iPads, iPhones, BlackBerrys etc.

It's really simple and can be done on about 5 lines.

All you have to do is put the following code in your <head></head> tags.

PHP:
<script type="text/javascript" language="javascript">
var mobileUser = navigator.userAgent.match(/(iPod)|(iPhone)|(iPad)|(webOS)|(BlackBerry)|(android)/i); /* will return (bool) true if the user is on a device that contains one of the strings in the brackets, (bool) false if not. */
if ( mobileUser ) /* is mobileUser set to 'true'? */
{
    alert( "This website is built for desktop computers and laptops, some functions may not work properly on this site!"); /* an alert to show to the user */
} /*end the if statement*/
</script>

Simple, right? But how do I show content to specific handheld devices, and not all of them? Easy, just another if statement:

PHP:
<script type="text/javascript" language="javascript">
var uA = navigator.userAgent; /* assign the value of the users 'userAgent' to a string called 'uA' to shorten our code */
if ( uA.indexOf( "iPod" ) > 0 ) /* the user is on an iPod touch */
{
    alert( "Welcome, iPod touch user!" );
}
elseif ( uA.indexOf( "iPad" ) > 0 )
{
    alert( "You are currently viewing this website on an iPad!" );
} /*end if statement*/
</script>
You can keep adding conditions to the code above if you like.

Anyway, I hope this works because yet again, I coded this in the post box on DevBest and I'm not the best at explaining things.

So good luck with whatever you use it for.
- Mark.
 

Adil

DevBest CEO
May 28, 2011
1,278
716
Thanks Mark :D
Probably gonna integrate this with my various CMS projects (my hk and my bittybay CMS)
 

Kaz

BooYah
Staff member
Nov 16, 2010
3,064
1,025
Nice release Mark, just a quick question.

Where it says
PHP:
var mobileUser = navigator.userAgent.match(/(iPod)|(iPhone)|(iPad)|(webOS)|(BlackBerry)|(android)/i); /* will return (bool) true if the user is on a device that contains one of the strings in the brackets, (bool) false if not. */
if ( mobileUser ) /* is mobileUser set to 'true'? */

How does it define the (iphone) (ipad) bit etc... Say for example a Nokia or Samsung or w/e wanted to connect (not on android) is it called symbian or something
 

Markshall

Русский Стандарт
Contributor
Dec 18, 2010
2,638
2,393
Nice release Mark, just a quick question.

Where it says
PHP:
var mobileUser = navigator.userAgent.match(/(iPod)|(iPhone)|(iPad)|(webOS)|(BlackBerry)|(android)/i); /* will return (bool) true if the user is on a device that contains one of the strings in the brackets, (bool) false if not. */
if ( mobileUser ) /* is mobileUser set to 'true'? */

How does it define the (iphone) (ipad) bit etc... Say for example a Nokia or Samsung or w/e wanted to connect (not on android) is it called symbian or something
I don't understand what you mean. The code performs a 'regular expression match' on the strings inside the brackets and separated by the | symbol. If navigator.userAgent contains one of the words in the brackets, it sets mobileUser to true, thus alerting the user to whatever you you set in alert();.

You can add more and/or remove some of the ones I had put in.

If you want to get the useragent of a mobile to add it to the script, you'll have to do this:

PHP:
<script type="text/javascript" language="javascript">
document.write( navigator.userAgent );
</script>

...to get the full useragent of the mobile/handheld device, once you have written out the useragent to the browser, you can then proceed to take the necessary string to add in the script I have coded above, if that makes sense?
 

brsy

nah mang
May 12, 2011
1,530
272
Works 100%, thanks! I put it onto my site, Pabbo.NET for all the noobs who think retro's can be played on a mobile.
 
Status
Not open for further replies.

Users who are viewing this thread

Top