Mobile Web in High Resolution

With the advent of high DPI device screens like Apple's retina display, creating high resolution apps has become a standard for native app developers. But what about us mobile web folks? Most elements like text and images are automatically handled for us by the browser and display in the highest resolution possible. But when we use CSS styles like borders and shadows, 1px really ends up becoming 2px (at least on the retina display). So in order to create a higher resolution experience we need a way to set less than 1px borders.

Lets take a look at a standard CSS button:

CSSbutton {
  font-size: 13px;
  line-height: 36px;
  font-family: sans-serif;
  font-weight: bold;
  color: #fff;
  padding: 0 15px;
  border: solid 1px;
  border-color: #2978B0 #266FA5 #1C557D;
  border-radius: 3px;
  background: -webkit-gradient( linear, left top, left bottom,
              from(#50A9E7), to(#307CB3) );
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2),
              0 1px 1px rgba(0,0,0,.08);
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}

It uses borders, gradients, and shadows to achieve a more touch-friendly button. Now, I’m sure some people are wondering what more do I need than that? Well if you pull this up on a high resolution display like the iPhone 4, you get this:

Notice how the borders and shadows end up measuring 2 pixels rather than 1. This occurs because the browser attempts to render a 1 pixel border which, for the high-res display, ends up being 2 pixels at the 1:1 zoom level. Really all you need to know is that it's not acceptable to do this: border: 0.5px red solid; since all pixel measurements must be positive integers. So how do we achieve a button like this:

This button uses a completely different approach for high-res displays. Instead of relying on standard border styles, it uses offset box shadows with a hidden gem called spread radius. The spread radius as documented on MDN:

"Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element)"

Essentially we can set the spread radius to -1px and shrink the shadow effect to a half pixel length. And there it is, half pixel borders and shading for high-res devices! Take a look at the code:

CSS@media only screen and (-webkit-min-device-pixel-ratio:1.5),
       only screen and (min-device-pixel-ratio:1.5) {
    
  button {
    border:none;
    padding:0 16px;
    box-shadow: inset 0 0 1px #000,
                inset 0 1px 0 #75c2f8,
                0 1px 1px -1px rgba(0, 0, 0, .5);
  }

}

Note that I apply the box shadows in a specific order– more on this here.

Live Examples

Now pull out your iPhone 4(S), or any other high-res device, and take a look at these examples I put together:

Button example

 

Facebook example

 

List example

What if I dont have a high-res device?

All of these are pretty simple ways to use this half pixel technique, but the options are endless. Facebook is the first I’ve seen to use this effect in production code. If you find some other cool ways to take advantage of this technique let me know on twitter.