irislines web design
irislines web design

Device detection to single out the ipad for special styling

My friend and colleague Bill from Grumpy Engineering  helped me with this one:

I added this to the php block at the head of my template:

$isIPad = preg_match('/ipad/i', trim($_SERVER['HTTP_USER_AGENT']));
if ($isIPad) $device="ipad";
else $device="not-ipad";

and then could use

class=“<(question mark)php echo $device;  ?>”   on the body element of the index.php file.

(Of course I also added a line to the template with that variable for testing  that would display the results and not force me to examine the code to see if it was working.)

In my stylesheet I could then write rules specifically for the ipad:

.ipad  element-needing-custom-styles  {property: value;}

I was doing this to solve a problem with how the quicktime player displayed on the ipad (fallback for no flash when using Allvideos)

I increased the height of the player container to 72 px in the plugin parameters,  then set the theses styles:

/* adjust allVideos audio player */

.avPlayerWrapper {text-align:left; width:230px; clear:none; }
        .avPlayerWrapper .avPlayerContainer {margin:0;}

.avAudio .avPlayerContainer {height:24px; overflow:hidden; }
        .avAudio .avPlayerBlock {position:relative; top:-48px;}

#ipad .avAudio .avPlayerContainer {height:72px;}
         #ipad .avAudio .avPlayerBlock {position:relative; top:0;}

The results made mp3 players that were ugly, but functional.

The much better solution was to use WidgetKit’s Media Player from, but I’m still glad to know how to target the ipad specifically should I ever need to.

Tags: , , ,

IrisLines LLC
101 Washington Street
Brattleboro, VT 05301

802 257 7391