width=device-width, initial-scale, and too-wide elements

Just some random notes from the trenches in order to show everyone that, despite appearances, the viewport is not simple or easy to understand.

A browser vendor asked me to study the following problem:

  1. A page has width=device-width, or initial-scale=1, or both.
  2. The page also has an element of 1600px wide; far too wide for the layout viewport that’s normally created by the meta viewport.
  3. Should the browser zoom out in order to show the entire 1600px-wide element? Or should it ignore the wide element and show the usual result of 320-400px?

What do browsers do in practice? You may have guessed it: different things. Radically different, and with the single exception of Chrome 31 I cannot find good theoretical underpinnings for their behaviour.

out
The browser zooms out as much as possible in order to show the 1600px element
in
The browser zooms in to the usual ideal viewport; thus the element is only shown partly
Browser initial-scale=1 width= device-width Both
Android WebKit out in in
BlackBerry 10 out out out
Chrome 28 (Samsung) in in in
Chrome 31 (Google) in out in
Firefox 25 in in in
IE10 in in in
Safari out out in
UC9 out in in

(If the browser has an Out in the initial-scale column, it does not apply the ideal viewport width to the layout viewport; i.e. document.documentElement.clientWidth is the device default of 980 or 1024 or whatever.)

I see three valid lines of reasoning:

  1. The browser should always zoom out to accomodate the entire element. Only BlackBerry 10 does so.
  2. The browser should never zoom out to accomodate the entire element. Samsung’s Chrome, Firefox, and IE do so.
  3. It Depends. In that case, only Chrome 31’s behaviour makes sense.

Why does Chrome make sense? Because it zooms in when it encounters an initial-scale, which says something about the zoom level. It does not zoom in when it doesn’t encounter one. width=device-width, strictly speaking, does not say anything about the initial zoom level, so it makes sense to ignore it when it comes to zooming.

At least, that’s how I read the data and the theory now. But the very fact that browsers are all over the place proves that this sort of thing is not easy.

And we need a standard. But what should be in the standard?

This is the blog of Peter-Paul Koch, mobile platform strategist, consultant, and trainer. You can also follow him on Twitter.
Atom RSS

I’m around at the following conferences:

(Data from Lanyrd)

Categories:

Monthlies:

Comments

Comments are still open.

Post a comment

All comments on QuirksBlog are moderated. I will review your comment and publish it when I feel it’s appropriate to the post it was made on. I tend to publish comments in batches once or twice per day.

* required fields

Yes