JavaScript archives
Compatibility
Thidrekssaga
QuirksBlog
Donations
CSS book
Politics
Mobile
About
COH
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>.<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.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?
Categories:
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.