As an intern on the user interface engineering team this summer, I helped build UI components that can be used across Facebook. The last project I completed before I left was to help improve the user experience on Apple’s MacBook Pro with Retina display and future high resolution displays.
The reason for having a device pixel ratio is simple. While the Retina display has twice as many pixels per inch as the previous MacBook Pro, it doesn’t display content at half the size. This would make normal-size websites appear very tiny and make them very difficult to read. Instead, the MacBook Pro with Retina display uses a 2×2 square of pixels to draw the same amount of content the previous MacBook Pro would draw with only a single pixel. In places where a 12pt font is called for, it will render a 24pt font at half the size to make the letters look crisper.
Unfortunately, the problem is a little more complicated for images. Most images have a limited amount of detail and most websites only send images designed for a device pixel ratio of 1. The MacBook Pro with Retina display will up scale these images to twice their original size, which produces a blurry or pixelated result. We also don’t want to send images that are too large. These images will be down-scaled, which will reduce the pixel-level detail on small icons and make them less crisp.
Handling the device pixel ratio is not a new problem for mobile web developers. Apple’s iPhone 4 and iPhone 4S both have Retina displays with a device pixel ratio of 2. Google’s Nexus One has a device pixel ratio of 1.5 and the Galaxy Nexus and Galaxy Note both have device pixel ratios of 2.
The new problem for us was a changing device pixel ratio on desktop. A MacBook Pro with Retina display can be attached to external display that is not Retina. A browser window on the built-in display will have a device pixel ratio of 2 while a browser window on the external display will have a device pixel ratio of 1. A browser window can be moved back and forth between the two displays meaning the device pixel ratio can change after page load. Our solution needed to be ready for these changes and update the server with the new device pixel ratio appropriately.
When we approached the problem of server-side device pixel ratio detection on desktop at Facebook, we set several criteria:
- It should make a good guess about your device pixel ratio. (If a browser window had one device pixel ratio the last time, it likely still has the same device pixel ratio the next time.)
- It should correct itself after a refresh. (If a website doesn’t load correctly, most users’ first instinct is to refresh.)
- It should try to maintain a consistent pixel ratio within the window. (If the page loaded with one pixel ratio, it should continue to be served images at the same pixel ratio in future dynamic content.)
- It should send as few extra bytes as possible. (It’s wasteful to send the device pixel ratio to the server more often than necessary.)
With a standard, non-Retina display, people will continue to experience Facebook the same way they always have. With a Retina or other high-resolution display, they will now see the standard version of the page on first load, but after navigating or refreshing, they will see an appropriately high-resolution version of the page.
Andrew Zich was an intern this summer from the University of Illinois at Urbana-Champaign.