Detect iPad’s Safari Browser and Redirect to HTML5 Page

by Thai on April 4, 2010

I’m upset that Apple decided not to support Flash for the iPad and instead embraced html5 as their weapon of choice to implement video content. I wasn’t impressed with html5 until I saw the guys at Google ported Quake 2 over from Java. The potential dawned on me. I guess using the native language to handle the DOM isn’t so bad. You just have to roll up your sleave and tango JS into some bedroom boom boom. After all, parsing the native language is faster.

The server side script has to detect the user agent sent by the browser and this is what it’ll send in the http request.

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

A simple redirect with php’s header() method will send the client to the page according to the device’s browser or OS. I recommend that the script should look for stuff where it’s specific to the device. You don’t want to serve them your iPhone site if you’re checking for “mobile” in the request.

<?php

$useragent = strtolower($_SERVER['HTTP_USER_AGENT']);
preg_match('/ipad/', $useragent, $browser);
$device = $browser[0];

function get_agent($string){
	if($string == 'ipad')
	{
		//redirect browser to the html5 page
		header('Location: http://www.yoursite.com/link/to/page.html');
		exit();
	} else {
		$foo = 'Unidentified device';
	}

	return $foo;
}

get_agent($device);

?>

This skeleton of html5 markup has the device’s viewport value set to a constant so that it fits the viewport of the current device such as the iPad. The controls can be skinned with Javascript and CSS to give it some DOM visual effects.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>HTML5 Video!</title>
<style type="text/css">

#player {
 	padding-top: 6px;
 }

aside, header, footer, body{display: block;}

</style>
</head>

<body id="index" class="home">
    <header id="header" class="vid">
        <div id="logo"><h1>Logo</h1></div>
    </header><!-- #header -->

    <aside id="featured" class="body">
        <article>
            <figure>
                <video src="http://www.site.com/your/video.mp4" controls="controls" id="player"></video>
            </figure>
            <hgroup>
                <h2>Featured Video</h2>
                <h3><a href="#">A vid</a></h3>
            </hgroup>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mauris massa, tempus in eleifend id, sagittis ac urna.</p>
        </article>
    </aside><!-- #featured -->
<footer></footer><!-- #footer-->
</body>
</html>

So that’s the basics on how to get your site to figure out the user agent and then take them to a page that’s html5 formatted. You can view the source on the working sample in Safari or Chrome to see the structure. It’s missing other elements but the W3C Editor’s Draft outlines all the new tags. Some of the features I look forward seeing developers take advantage of will certainly give Flash reasons to fine tune their song and dance.