Watkins Web 3: Blog

Hardware Pixels vs Reference (Optical) Pixels

I saw this really interesting article on A List Apart. I thought it was a really good read. It has lots of information if you're planning on making responsive sites that look consistent on many devices. It talks about the difference between how pixels are rendered on different devices and how to target them better. It suggests using ems as the measurement for everything you would have previously used a pixel for. This way the whole site will be viewed properly no matter the device, zooming, etc. Informative read.

example 1: standard
example 2: normalized
"A developer might look up information on these two devices and think that if the screens are the same and they both use the Webkit rendering engine their website will look the same. Sadly this is not the case; as far as a website is concerned, the Galaxy Tab is 400px × 683px and the Kindle Fire is 600px × 1024px "