A tale of two viewports — part two

About a month ago I release part one of my series “A tale of two viewports,” where I discuss the widths and heights of the viewport, the <html> element, and related issues on desktop browsers. Today I release part two, which deals with the mobile browsers. And of course there’s the inevitable compatibility table.

I advise you to read part one before starting on part two; part one explains some crucial concepts that you need in order to understand part two.

Mobile browsers have two viewports, and not one, as the desktop browsers have. On mobile it’s impossible to make the viewport (relative to which all CSS layouts are calculated) as wide as the screen, because the screen is far too tiny and some CSS layouts may look horribly squashed.

Therefore mobile browser vendors have split the viewport into a visual one and a layout one; the first is the area the user actually sees on his screen, the second the area in which the CSS layout is calculated. This makes sense, but it’s one more complication for mobile web developers.

I also treat mouse coordinates, media queries, and the <meta viewport> tag.

Curious findings include:

Have fun!

This is the blog of Peter-Paul Koch, web developer, consultant, and trainer. You can also follow him on Twitter or Mastodon.
Atom RSS

If you like this blog, why not donate a little bit of money to help me pay my bills?



Comments are closed.

1 Posted by Ryan Cannon on 22 June 2010 | Permalink

Isn't this is going to become a much bigger issue next week, with iPhone 4? The device has a similar number of inches in screen real-estate, but four times as many pixels.

It seems like dpi is is going to be a problem: when drawing UI we can't draw in terms of pixels any more, we have to use absolute-size units. 200px on an iPad is significantly bigger than 200px on an iPhone 4, if both are zoomed at 100%.

2 Posted by ppk on 24 June 2010 | Permalink

Four times as many DEVICE pixels. The number of CSS pixels in the layout viewport will not change (at least, that's my guess).

dpi is a huge problem: basically dpi is a lie, as are the supposedly absolute measurements. 96 CSS pixels equal one inch, and that's about it.

We need to be able to say

padding: 1cm;

and really get one real-world centimeter in padding. Would be great for lists of links on touch interfaces.

But that's not the way things are heading right now. I have no clue what's going on with all those units, but it's been badly, badly mismanaged.