Is there a way to set the minimum viewport size for phones without causing the site to zoom in on tablets?

Question

I've been working on making a few websites that force 1000px layouts to be more responsive. On one, it scales nicely down to ~500px and on another it scales nicely to 780px. My phone is 320px across and my tablet is around 1000x across. The problem is that:

• If I don't set the viewport, both devices render the page ~1000px wide, so all of my nice scaling code gets completely ignored and the page is massive on the phone.
• If I set <meta name="viewport" content="width=device-width">, the page renders perfectly, but it starts out extremely zoomed in on the phone (zoomed to show 320px of the layout).
• If I set <meta name="viewport" content="width=780">, it renders and scales perfectly on the phone, but zooms in on the tablet (scaling the layout to 780px wide even though I have 1000px to work with).

I also tried a JavaScript workaround:

<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0" />
<script>
if (screen.width < 780) {
  var viewport = document.getElementById("viewport");
  viewport.setAttribute("content", "width=780");
}
</script>

This works in Chrome but not Firefox. I even tried using CSS transforms to scale the entire page on Firefox, but that leaves a bunch of whitespace around the scaled page (and is a terrible solution).

Is there a way to make devices render and scale to their width down to 500px, and then scale and render at 500px when their screen size is below that?

Answer 1

If your content should be at least 780px wide, set min-width on your body.

body {
  min-width: 780px;
}

If you want it to start zoomed out (as if viewport is 780px wide), use shrink-to-fit:

<meta name="viewport" content="width=device-width, shrink-to-fit=yes">