How can I use meta viewport and CSS media queries to make the average 960px website look good on the iPhone and iPad?

Question

Question

I know there are a lot of questions on Stack Overflow about the meta viewport tag, but I can\'t find anyone asking what seems to be the most obvious and usefu

Answer 1

I use Serban Ghita's php Mobile Detection method:

https://github.com/serbanghita/Mobile-Detect

...then this php in the head tag:

<?php
if ($detect->isMobile() && !$detect->isTablet()) {?>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, max-scale = 1.0">
<?php } ?>

Works great.

Answer 2

You could use JS to rip out the meta viewport tags like Cole discusses here - http://cole007.net/blog/136/responsiveish-viewport-hack there's also another option in the comments

Answer 3

Try adding maximum-scale to your meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Answer 4

Combine a media query with zoom.

@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {
    html {zoom:0.8;}
}