5

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?

Brendan Long
  • 53,280
  • 21
  • 146
  • 188
  • Adding the viewport meta tag isn't enough. You also need to use CSS to adjust the display of certain elements for smaller resolutions. For example define 100% width for floating elements that have smaller widths on desktop resolution. – Johann Kratzik Dec 05 '16 at 21:59
  • @JohannKratzik I already do that. The problem is that I can't scale below 780px (not because I don't know how to use media queries, but because the layout wouldn't work). It's someone else's design and my goal is to make it work as small as possible without actually changing the basics of their design. – Brendan Long Dec 05 '16 at 22:10
  • Possible duplicate of [Achieving min-width with viewport meta tag](http://stackoverflow.com/questions/15040408/achieving-min-width-with-viewport-meta-tag) – Brendan Long Dec 06 '16 at 20:55

2 Answers2

4

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">
Andrew Svietlichnyy
  • 743
  • 1
  • 6
  • 13
1

I think I've figured out a solution: Firefox ignores changes the viewport meta tag, but will accept a new viewport, so instead of fixing the tag, I just insert one based on my requirements:

<script>
  var MIN_WIDTH = 780;
  var viewport = document.createElement("meta");
  viewport.setAttribute("name", "viewport");
  if (screen.width < MIN_WIDTH) {
    viewport.setAttribute("content", "width=" + MIN_WIDTH);
  } else {
    viewport.setAttribute("content", "width=device-width, initial-scale=1.0");
  }
  document.head.appendChild(viewport);
</script>

I also wrote a polyfill to add a min-width attribute to the viewport meta tag, so you can just do:

<meta name="viewport" content="width=device-width, initial-scale=1.0, min-width=780"/>
<script type="text/javascript" src="viewport-min-width.js"></script>

https://github.com/brendanlong/viewport-min-width-polyfill

Brendan Long
  • 53,280
  • 21
  • 146
  • 188