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


Tags: html,css,mobile

Problem :

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 useful question:

How can I use meta viewport and CSS media queries to make the average 960px website design look good on the iPad (and desktop), while still retaining a smaller viewport and site design (e.g., 320px) for the iPhone and other mobile phones?

For the iPhone, I think it goes without saying: a smaller, phone-friendly site (e.g., 320px wide) is ideal. But for the iPad's larger screen, a special mobile site isn't really necessary; using the normal 960px site design seems appropriate. A 320px site looks clownish on the iPad, and I don't always want to design a third variation for the iPad's 768px.

Here's the problem: I can't figure out how to use the meta viewport tag and CSS media queries to achieve both 1) a normal site on the iPad, and 2) a mobile site on the iPhone. I realize it's possible with JavaScript hacks (e.g., dynamically changing the meta viewport tag according to the device), but I don't want to use JavaScript; I don't think JS should be required to achieve basic usability on a simple website with static content.

1) If I remove the meta viewport tag altogether, my normal 960px site looks perfect on the iPad, but bad on the iPhone (large empty margin on the right side):

Website example without meta viewport tag

2) On the other hand, if I use <meta name="viewport" content="width=device-width" />, then the site looks great on the iPhone, but bad on the iPad (zoomed to 768px, site spills outside of the viewport):

Website example with meta viewport tag

This seems like it should be the simplest thing in the world, but I haven't been able to solve it. What am I missing?

Markup/CSS

CSS:

<style type="text/css">
body { margin: 0; }
.mobile { width: 320px; background: #fdd; display: none; }
.desktop { width: 960px; background: #ddf; }
</style>

<style type="text/css" media="screen and (max-device-width: 480px)">
.mobile { display: block; }
.desktop { display: none; }
</style>

Markup:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div class="mobile">Phone (320px)</div>
<div class="desktop">Desktop and tablet (960px)</div>
</body>
</html>


Solution :

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

    CSS Howto..

    meteorjs how to import a wrapbootstrap theme

    How to use CSS in ASP.NET application

    How do I display image flush with other images after a clear?

    how to align div's horizontally in CSS

    How to center an img inside a div

    CSS border shape - how to cut off rectangle right upper corner [duplicate]

    How do CSS sprites speed up a web site?

    How to fix sizes when I developed my website with 'more space' display setting on macbook retina

    How can I use Rspec to check for the absence of certain CSS classes?

    Shows a dropdown element with jQuery

    How to write inline CSS to web2py view

    How do I keep a fixed header on top if there's a small strip on top of it?

    How to set top div height to the remaining height css

    How to program an
      image gallery, where the hover effect impacts more than 1 element? [closed]

    Show Content if below specific width

    How to hide overflow on slideshow without hiding arrows?

    How to display a box of color beside a table row using CSS?

    How do I achieve this particular hover effect?

    CSS: How to align text to baseline of height-adjusted input element?

    Child div's evenly spaced and flushed to side of parent: how to?

    How to Unmerge CSS and JS in magento using MySQL Command

    how to make an interactive uploader like gmail and facebook have?

    How can I use an inline style to add a shadow around the used portion of my page?

    Bootstrap dropdown div not showing in non-collapsed view

    How to show a pointer on specific table with css and Twitter Bootstrap?

    css how can i center multiple elements with absolute position

    How do you make a CSS menu for mobile devices that stays the same size regardless of page zoom?

    How does the :not selector work to block older browsers and for which browsers does it work? [closed]

    Asp.Net how to apply a css style to all the control of it's kind

    How do I detect the user’s browser and apply a specific CSS file?