

Mobile Web in High Resolution - uptown
http://bradbirdsall.com/mobile-web-in-high-resolution

======
ricardobeat
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.

------
kickingvegas
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.

~~~
jbail
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.

~~~
kickingvegas
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. :)

------
ComputerGuru
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.

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

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

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

~~~
wmf
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.

------
Portsmere
Great work!

