I'm writing a CSS book

JavaScript archives Compatibility Thidrekssaga QuirksBlog Donations CSS book Politics Mobile About COH

contact

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

(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?

Comments

Comments are closed.