title: How can I use meta viewport and CSS media queries to make the average 960px website look good on the iPhone and iPad?
body: <h1>Question</h1>
  
  <p>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:</p>
  
  <p><strong>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?</strong></p>
  
  <p>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.</p>
  
  <p>Here's the problem: I can't figure out how to use the meta viewport tag and CSS media queries to achieve both <strong>1) a normal site on the iPad, and 2) a mobile site on the iPhone</strong>. 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.</p>
  
  <p>1) If I remove the meta viewport tag altogether, my normal 960px site looks <em>perfect</em> on the iPad, but bad on the iPhone (large empty margin on the right side):</p>
  
  <p><img src="https://i.stack.imgur.com/EPs0s.png" alt="Website example without meta viewport tag"></p>
  
  <p>2) On the other hand, if I use <code>&lt;meta name="viewport" content="width=device-width" /&gt;</code>, then the site looks great on the iPhone, but bad on the iPad (zoomed to 768px, site spills outside of the viewport):</p>
  
  <p><img src="https://i.stack.imgur.com/mOx09.png" alt="Website example with meta viewport tag"></p>
  
  <p>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?</p>
  
  <h1>Markup/CSS</h1>
  
  <p>CSS:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  body { margin: 0; }
  .mobile { width: 320px; background: #fdd; display: none; }
  .desktop { width: 960px; background: #ddf; }
  &lt;/style&gt;
  
  &lt;style type="text/css" media="screen and (max-device-width: 480px)"&gt;
  .mobile { display: block; }
  .desktop { display: none; }
  &lt;/style&gt;
  </code></pre>
  
  <p>Markup:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="mobile"&gt;Phone (320px)&lt;/div&gt;
  &lt;div class="desktop"&gt;Desktop and tablet (960px)&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>