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:
<meta viewport>in Samsung WebKit (on bada), several properties change meaning and suddenly give different data. This is obviously a bug, and one I hadn’t expected. It makes your job as a web developer more complicated — but then, nearly everything I discover does.
Upcoming speaking gigs:
Comments are closed.