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 YooThemes.com, but I’m still glad to know how to target the ipad specifically should I ever need to.
Tags: extensions, iPad, Joomla!, php