Custom Device-Specific Content

Sometimes you want to publish certain content only for a specific device or device type.

As an example, perhaps you have an app for the iPad and you want to let iPad users know about it. But not users of other phones and tablets, as they likely would consider it to be information clutter.

As another example, you have a QR Code image for device cameras and want to publish it only on computers, where mobile devices can photograph it.

It is generally prudent to consider your audience. If your site visitors might have more than one type of mobile device available to them, a link may be provided to open a div with additional device information or the QR Code.

Whenever something needs to be published only for mobile or only for computer, or only for a specific type of mobile device, the Mobile Detect PHP software is available to help.

Mobile Detect is not my software. It's well-written and free software that can be downloaded from http://mobiledetect.net/ by clicking the "Download…" button.

This article contains a PHP script with which to use Mobile Detect.

The article also contains the source code for a web page containing examples of use. Here's the output of that example code for the computer you're using.

Device type detected: computer

I see you're using a desktop or laptop computer.

This page uses Mobile Detect to present content custom for the type of computer/device you're using to view the page.

Use various devices to access this web page. You'll see the above example respond accordingly.

Let's get this installed so you can use it on your website.

Installation

Installation is in two parts, the Mobile Detect software and a PHP script to use Mobile Detect.

Neither needs customization.

Both need to be uploaded into the same directory on your server. It can be any directory, even the document root, so long as it's a directory browsers have public access to.

Download the Mobile Detect software and upload it to your server with Mobile_Detect.php file name.

Copy this source code, save it as DetectType.php, and upload it to your server in the same directory Mobile_Detect.php is located.

<?php
require_once(__DIR__.'/Mobile_Detect.php');
$detect = new Mobile_Detect;
$DeviceType = ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'phone') : 'computer');
$DeviceBrand = '';
if($detect->isIphone()) { $DeviceBrand = 'iPhone'; }
elseif($detect->isIpad()) { $DeviceBrand = 'iPad'; }
elseif($detect->isiOS()) { $DeviceBrand = 'iOS'; }
elseif($detect->isAndroidOS()) { $DeviceBrand = 'AndroidOS'; }
elseif($detect->isSamsung() or $detect->isSamsungTablet()) { $DeviceBrand = 'Samsung'; }
elseif($detect->isBlackBerry() or $detect->isBlackBerryOS()) { $DeviceBrand = 'Blackberry'; }
elseif($detect->isWindowsMobileOS() or $detect->isWindowsPhoneOS()) { $DeviceBrand = 'WindowsMobileOS'; }
?>

The installation is done.

Testing With the Example

Below is the source code for an entire HTML web page to test your Mobile Detect installation.

It's purpose is both to test your installation and to illustrate how Mobile Detect information is used.

The first line of the source code may need to be updated. It's where the location of the Mobile Detect software is specified. You'll see it as /DetectType.php in the source code.

If you installed DetectType.php at your server's document root, no change is necessary. Otherwise, change /DetectType.php to the correct location.

When ready, upload the web page to your server and type it's URL into your browser.

Here's the web page source code.

<?php include_once($_SERVER['DOCUMENT_ROOT'] . '/DetectType.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Detect in Use</title>
<style type="text/css">
body { font-size:100%; font-family:sans-serif; }
#content { max-width:6in; margin:.5in auto; }
</style>
</head>
<body>
<div id="content">

<h4>Device type detected: <?php echo($DeviceType) ?></h4>

<?php if($DeviceType=='phone'): ?>
<p>
I see you're using a mobile phone.
</p>
<?php endif; ?>
<?php if($DeviceType=='tablet'): ?>
<p>
I see you're using a mobile tablet.
</p>
<?php endif; ?>
<?php if($DeviceType=='computer'): ?>
<p>
I see you're using a desktop or laptop computer.
</p>
<?php endif; ?>

<p>
This page uses <a href="http://mobiledetect.net/">Mobile Detect</a> to present content custom for the type of computer/device you're using to view the page.
</p>

<?php if($DeviceBrand=='iPhone'): ?>
<p>
I see you're using an iPhone.
</p>
<?php endif; ?>
<?php if($DeviceBrand=='iPad'): ?>
<p>
I see you're using an iPad.
</p>
<?php endif; ?>
<?php if($DeviceBrand=='iOS'): ?>
<p>
I see you're using an Apple device.
</p>
<?php endif; ?>
<?php if($DeviceBrand=='AndroidOS'): ?>
<p>
I see you're using an Android device.
</p>
<?php endif; ?>
<?php if($DeviceBrand=='Samsung'): ?>
<p>
I see you're using a Samsung device.
</p>
<?php endif; ?>
<?php if($DeviceBrand=='Blackberry'): ?>
<p>
I see you're using a Blackberry.
</p>
<?php endif; ?>
<?php if($DeviceBrand=='WindowsMobileOS'): ?>
<p>
I see you're using a Windows device.
</p>
<?php endif; ?>

</div>
</body>
</html>

When you load the URL of the web page into your browser, the first line of the web page begins with the words "Device type detected". The line should end with "computer," "tablet," or "phone."

If nothing follows "Device type detected" on the same line, then either

the DetectType.php location in the first line of the web page is specified incorrectly (colored blue in the source code) or
the installation of Mobile_Detect.php or DetectType.php is incorrect.

When the example page is working, here are some notes about using the software to publish certain content only for a specific device or device type.

The First Line

The first line of the example page source code needs to be in every page that will use the detection. It isn't necessary that the one line of code is actually located as the first line, but it does need to be located somewhere above the point where the information will be used.

To use the information, certain variables are consulted and PHP if/endif constructs are employed.

The Variables

These are the two variables:

$DeviceType — This variable's value will be "computer", "tablet", or "phone".

$DeviceBrand — This variable will either be blank or contain a device brand or operating system. Only a few are tested for, specifically: iPhone, iPad, iOS, AndroidOS, Samsung, Blackberry, and WindowsMobileOS.

If you wish to test for other device brands or operating systems, here is a list of detection methods that can be used to customize DetectType.php according to your needs. (The list was obtained at the Mobile Detect demo page.)

isMobile()
isTablet()
isiPhone()
isBlackBerry()
isHTC()
isNexus()
isDell()
isMotorola()
isSamsung()
isLG()
isSony()
isAsus()
isNokiaLumia()
isMicromax()
isPalm()
isVertu()
isPantech()
isFly()
isWiko()
isiMobile()
isSimValley()
isWolfgang()
isAlcatel()
isNintendo()
isAmoi()
isINQ()
isGenericPhone()
isiPad()
isNexusTablet()
isSamsungTablet()
isKindle()
isSurfaceTablet()
isHPTablet()
isAsusTablet()
isBlackBerryTablet()
isHTCtablet()
isMotorolaTablet()
isNookTablet()
isAcerTablet()
isToshibaTablet()
isLGTablet()
isFujitsuTablet()
isPrestigioTablet()
isLenovoTablet()
isDellTablet()
isYarvikTablet()
isMedionTablet()
isArnovaTablet()
isIntensoTablet()
isIRUTablet()
isMegafonTablet()
isEbodaTablet()
isAllViewTablet()
isArchosTablet()
isAinolTablet()
isNokiaLumiaTablet()
isSonyTablet()
isPhilipsTablet()
isCubeTablet()
isCobyTablet()
isMIDTablet()
isMSITablet()
isSMiTTablet()
isRockChipTablet()
isFlyTablet()
isbqTablet()
isHuaweiTablet()
isNecTablet()
isPantechTablet()
isBronchoTablet()
isVersusTablet()
isZyncTablet()
isPositivoTablet()
isNabiTablet()
isKoboTablet()
isDanewTablet()
isTexetTablet()
isPlaystationTablet()
isTrekstorTablet()
isPyleAudioTablet()
isAdvanTablet()
isDanyTechTablet()
isGalapadTablet()
isMicromaxTablet()
isKarbonnTablet()
isAllFineTablet()
isPROSCANTablet()
isYONESTablet()
isChangJiaTablet()
isGUTablet()
isPointOfViewTablet()
isOvermaxTablet()
isHCLTablet()
isDPSTablet()
isVistureTablet()
isCrestaTablet()
isMediatekTablet()
isConcordeTablet()
isGoCleverTablet()
isModecomTablet()
isVoninoTablet()
isECSTablet()
isStorexTablet()
isVodafoneTablet()
isEssentielBTablet()
isRossMoorTablet()
isiMobileTablet()
isTolinoTablet()
isAudioSonicTablet()
isAMPETablet()
isSkkTablet()
isTecnoTablet()
isJXDTablet()
isiJoyTablet()
isFX2Tablet()
isXoroTablet()
isViewsonicTablet()
isOdysTablet()
isCaptivaTablet()
isIconbitTablet()
isTeclastTablet()
isOndaTablet()
isJaytechTablet()
isBlaupunktTablet()
isDigmaTablet()
isEvolioTablet()
isLavaTablet()
isAocTablet()
isMpmanTablet()
isCelkonTablet()
isWolderTablet()
isMiTablet()
isNibiruTablet()
isNexoTablet()
isLeaderTablet()
isUbislateTablet()
isPocketBookTablet()
isKocasoTablet()
isHisenseTablet()
isHudl()
isTelstraTablet()
isGenericTablet()
isAndroidOS()
isBlackBerryOS()
isPalmOS()
isSymbianOS()
isWindowsMobileOS()
isWindowsPhoneOS()
isiOS()
isMeeGoOS()
isMaemoOS()
isJavaOS()
iswebOS()
isbadaOS()
isBREWOS()
isChrome()
isDolfin()
isOpera()
isSkyfire()
isEdge()
isIE()
isFirefox()
isBolt()
isTeaShark()
isBlazer()
isSafari()
isUCBrowser()
isbaiduboxapp()
isbaidubrowser()
isDiigoBrowser()
isPuffin()
isMercury()
isObigoBrowser()
isNetFront()
isGenericBrowser()
isPaleMoon()

Instructions for customizing DetectType.php is outside the scope of this article. If you're proficient with PHP, you'll see how it's done in the DetectType.php script where testing is accomplished.

$DeviceType and $DeviceBrand are the only two variables the example page's PHP if/endif constructs consult.

The PHP if/endif Constructs

The PHP if/endif construct used on the example web page is of this format:

<?php if([VARIABLE]=='[VALUE]'): ?>
[CONTENT]
<?php endif; ?>

Replace [VARIABLE] with one of the two variables.

Replace [VALUE] with the value being tested for.

Replace [CONTENT] with content to publish if the test is positive.

As an example, let's test the variable $DeviceBrand to see if it contains the value Samsung.

<?php if($DeviceBrand=='Samsung'): ?>
Ha! Another Samsung user. Welcome!
<?php endif; ?>

Put a PHP if/endif construct into your web page wherever you want to publish certain content only for a specific device or device type.

With the software installed on your server, you can put device-specific content on any or all your .php web pages.

(This article first appeared in Possibilities ezine.)

Will Bontrager

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.