Thursday, January 5th, 2012

Different meta viewport tags for iPhone and iPad

Coding responsive designs I’ve often wanted to use the viewport meta tag for the iPhone but not for the iPad (or use it differently for the iPad) – today I stumbled across these iPad detection scripts by David Walsh.

Using this we can serve a specific viewport meta tag for the iPad, as I’ve done below.

<?php $isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
if ( $isiPad ) { ?>
<?php // This is an iPad! ?>
    <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1.0;">
<?php    } else { ?>
<?php // Not an iPad ?>
    <meta name="viewport" content="width=device-width; initial-scale=0.65; maximum-scale=1.0;">
<?php } ?>