High DPI Web Sites

Did you know that DPI is a reasonable consideration in Web design these days? Don’t feel too badly if you did not, you would be surprised how many people do not even realize it is a consideration to take heart on.

One area of Web design that is going to become more important in the coming years is high DPI. For those of us working on WebKit, this will also become an issue for WebKit applications and for Dashboard widgets.
What is DPI?

DPI stands for “dots per inch” and refers to the number of pixels of your display that can fit within an inch. For example a MacBook Pro has a 1440×900 resolution on a 15 inch screen. Screens exist for laptops, however, that have the same physical size (15 inches) but that cram many more pixels into the same amount of space. For example my Dell XPS laptop has a 1920×1200 resolution.
Why does this matter?

Consider a Web page that is designed for an 800×600 resolution. Let’s say we render this Web page such that the pixels specified in CSS (and in img tags and such on the page) map to one pixel on your screen.

On a screen with 1920×1200 resolution the Web site is going to be tiny, taking up Source: Surfin’ Safari

Tags: macbook pro, high dpi, webkit