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 } ?>
THX!!
You’ve just saved a project on wordpress what was driving me crazy!
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; }
}
Thank you Sir, this has saved my bacon.