Mobile Web in High Resolution | Hacker News Reader

Mobile Web in High Resolution

bradbirdsall.com

42 pointsuptown12 comments

Pretty interesting, though the examples look better at the original 2x resolution on an iPhone. The resolution is so high that the single pixel borders almost disappear, losing the 3d effect.

CSS should accept decimal values for border width, like it already does for other properties.

With due respect to the writer, posts like this only reinforce the notion that if you're using resolution-dependent pixels to specify layout for multi-resolution screens, you are already conceptually broken because you are resorting to unnatural techniques to obtain the desired output. Using real world units like inches or centimeters are the way out here. FWIW, banning pixels is an old topic of discussion with regards to resolution independent displays.

Do you know of any good examples of CSS-based layouts using units like inches or centimeters?

When I do mobile web, I use percentages for UI layout elements (like headers, footers, sidebars, etc), and pixels for text, buttons, etc.

This approach definitely results in a slightly different display on different screen resolutions, but the overall effect is that it looks good and is usable no matter where you view it. For me, this is the approach I've found that "just works", so I keep using it.

That said, I don't think I've ever seen centimeters and inches used in any CSS I've come across, but I'd love to see some examples that are well done.

Disclaimer: I'm not a CSS guy. That said, I doubt that many CSS practitioners use real world units due to legacy. But the argument still stands that the _only_ sane answer to handling resolution-independent layout is to start using real world units and the sooner web interfaces migrate to it the better. Think of it as a jobs program for web designers. :)

Am I the only that feels that while, yes, the original "low-res" examples do look different on a high-DPI display vs traditional resolutions, they don't necessarily look worse?

It's just different. No one says they have to be identical, and IMHO the original does not look bad on an iPhone screen.

Alternatively, use a viewport meta tag to set the minimum and maximum zoom to 0.5

Seems like this kind of resolves the issue for the border property but is not suitable for others?

On the iPhone 1px means 2px? Where was the rage? If Microsoft had done this, everybody would scream about distorted web standards.

1px means 2 pixels on "retina" displays (iPhone 4). On some recent Android phones 1px = 1.5 pixels.

CSS1 says "Pixel units are relative to the resolution of the canvas, i.e. most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the UA should rescale pixel values." http://www.w3.org/TR/2008/REC-CSS1-20080411/#length-units

Apple's explanation of their implementation: http://www.webkit.org/blog/55/high-dpi-web-sites/

There was intense discussion at the time, but ultimately this rule exists for a reason and is beneficial in virtually all situations.

Some terminology that you didn't need to know in 2005:

"device pixel": what the screen reports is a pixel. Usually it's a square containing red, green, and blue, but not if you use a PenTile display.

"CSS pixel" is what widths and clientX are measured in. Interestingly, the CSS spec has always defined a CSS pixel relative to the angle you'd get if you read it, but browsers always treated them as device pixels until they implemented full page zoom. (aka logical pixel in IE8)

"screen pixel" (system pixel in IE8) is the unit in which window.screenX is measured. It's what CSS pixel would be at 100% zoom. Mozilla is trying to end the insanity by removing this different measure.

http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_n...

The alternative would mean everything spec'd in pixels would look tiny on retina display devices. It's better to have a few sub-optimal border radius curves than to break the web completely.

Personally, I think his "wrong" 2x example looks much better than the "fixed" one. The top inner border highlight is practically invisible on the latter, and the border around the button is fairly hard to see.

Great work!

Reply on news.ycombinator.com