JavaScript to Detect Mobile Device

When a web page has certain content to be published only on desktop/laptop computers, or only on multimedia devices like smartphones, then there must be a way to detect which is being used. There are ways to do that.

The Custom Device-Specific Content article describes a PHP-powered method of detecting whether the requesting browser is being used on a multimedia device. The detection is accomplished before the server sends any content to the browser.

If you don't need that kind of advance notice or you prefer to use JavaScript, one line of JavaScript can do the trick for general public web pages. It uses the browser's user-agent information to determine if the page is requested by a browser on an Android, iPhone, or iPad device. (The line can be updated for recognizing additional smartphones as needed.)

The user-agent string can be spoofed, however. Therefore, if your implementation requires more certainty and you still prefer to use JavaScript, the ua-parser-js may be used.

Be all that as it may, if yours are general non-critical public web pages and you want to use JavaScript for detecting whether or not a multimedia device is being used, consider using The One-Line JavaScript for the detection.

Implementation

Implementation includes an example that displays content depending on whether or not a mobile device was detected.

The One-Line JavaScript

The very first implementation step is to insert the line of JavaScript somewhere in the web page. Near the bottom of the source code generally is a good place.

Here is the one-line JavaScript between script tags.

<script type="text/javascript">
var IsDevice = navigator.userAgent.match(/Android|iPhone|iPad/i) ? true : false;
</script>

Notice that the example checks only for Android and Apple mobile devices. Other devices can be added. See the Adding Detection for an Additional Device presented further down on this page.

The Conditional Content

Create two divs, one with content for publishing if a mobile device was detected. And the second for publishing content when no mobile device was detected.

Here is an example of conditional content.

<div id="show-only-if-mobile-device" style="display:none;"
<p>Device content to publish goes here</p>
</div>
<div id="show-this-if-no-mobile-device-detected" style="display:none;"
<p>Computer content to publish goes here</p>
</div>

The above must be in the web page above The One-Line JavaScript.

JavaScript to Handle the Presenting of Conditional Content

Put the following presentation-handling JavaScript in the web page somewhere below The One-Line JavaScript.

<script style="text/javascript">
if(IsDevice) { document.getElementById("show-only-if-mobile-device").style.display="block"; }
else { document.getElementById("show-this-if-no-mobile-device-detected").style.display="block"; }
</script>

Now you are good to go. But do test it to verify it works as intended.

Note that the blue text in the JavaScript match the id values of the divs in The Conditional Content.

Adding Detection for an Additional Device

To add a device to the detection list in The One-Line JavaScript, find a unique string in the device's user-agent information (how-to follows). Then add that unique string to the one-line JavaScript as described further below.

If the device is your own, the IP address and UA information page publishes the user-agent information string for your device. Otherwise, user-agent information strings can be found on the internet.

For example, if you want to add BlackBerry devices to the detection list, do a "user-agent for BlackBerry" search. There should be at least one, perhaps many, matches for web pages that list user-agent information for various devices and computers.

When the user-agent information is presented, you'll see that the word BlackBerry is present in each of various user-agent information strings.

For your familiarity, so you know what type of information to look for, here is an example user-agent information string for the BlackBerry.

Mozilla/5.0 (BlackBerry; U; BlackBerry 9860; en-US) AppleWebKit/534.11+ (KHTML, like Gecko) Version/7.0.0.254 Mobile Safari/534.11+

The word BlackBerry is a unique word when compared to the user-agent information of other devices. So we'll use that when updating The One-Line JavaScript.

To accomplish the updating, add |BlackBerry to the list of possible matches in the one-line JavaScript (the vertical bar character followed by the word BlackBerry — no spaces). You'll end up with

var IsDevice = navigator.userAgent.match(/Android|iPhone|iPad|BlackBerry/i) ? true : false;

Follow that procedure for every type of mobile device you want to add.

There is no practical limit to how many types of mobile devices you want to add. The future is likely to bring more types into the market.

With the one line of JavaScript, you can present content exclusively for mobile devices and content exclusively for computers.

This article first appeared with an issue of the Possibilities newsletter.

Will Bontrager