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 } ?>

4 Responses to “Different meta viewport tags for iPhone and iPad”

  1. ilaria says:

    You’ve just saved a project on wordpress what was driving me crazy! :)

  2. Nur Mohammed Rony says:

    looking to it. you can use stylesheet as bellow

    /* iPad [portrait + landscape] */
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .selector-01 { margin: 10px; }
    .selector-02 { margin: 10px; }
    .selector-03 { margin: 10px; }

    /* iPhone [portrait + landscape] */
    @media only screen and (max-device-width: 480px) {
    .selector-01 { margin: 10px; }
    .selector-02 { margin: 10px; }
    .selector-03 { margin: 10px; }

  3. Matt says:

    Thank you Sir, this has saved my bacon.

  4. Jim Pannell says:

    Thanks for this. I’d come across David Walsh’s article before, but hadn’t thought of using the ipad detection script in this way. It’s gonna save my client a fair bit of my time (meaning money).

Leave a Reply