Mes liens
796 shaares
3 results
tagged
Retina
It's hard to believe I have been blogging for more than 7 years. Michael Wozniak, my hallmate during my freshman year at Georgia Tech, had gotten me into Gentoo Linux the year prior and told me he was playing with WordPress 1.2. Compared to the MediaWiki site I was running at the time that piqued my curiosity and I began blogging on WordPress on my G4 Mac Mini that summer. I immediately fell in love with it and began learning CSS and PHP to tweak the theme.
A few months ago I decided to recreate this website’s favicon to support retina-caliber displays. I found this trickier to accomplish than I anticipated, mainly due to a dearth of good ICO-savvy icon creation tools.
Old (non-retina) favicons are 16 × 16 px; a retina favicon is thus 32 × 32 px. The lazy way to support retina is to replace your old 16 px favicon.ico file with a 32 px file, and allow non-retina browsers to scale the image. The proper solution, however, is to create a single favicon.ico file containing two icon resources: one 16 × 16, the other 32 × 32. ICO files support other resolutions as well, but I see no practical utility in doing so.
Old (non-retina) favicons are 16 × 16 px; a retina favicon is thus 32 × 32 px. The lazy way to support retina is to replace your old 16 px favicon.ico file with a 32 px file, and allow non-retina browsers to scale the image. The proper solution, however, is to create a single favicon.ico file containing two icon resources: one 16 × 16, the other 32 × 32. ICO files support other resolutions as well, but I see no practical utility in doing so.
There now is an abundance of devices with some sort of high-density display, from MacBook Pros to iPads, from Windows Surface tablets to all kinds of mobile phones.
All of these devices have one thing in common: In web browsers (that support the high-density screen correctly) one CSS pixel is not equal to a physical screen pixel.
In terms of CSS, to specifically target this group of devices, unfortunately there’s no easy way to say “apply this set of rules to all devices where physical pixels are not equal to CSS pixels”. Instead you have to fight through a whole forest of media query rules.
All of these devices have one thing in common: In web browsers (that support the high-density screen correctly) one CSS pixel is not equal to a physical screen pixel.
In terms of CSS, to specifically target this group of devices, unfortunately there’s no easy way to say “apply this set of rules to all devices where physical pixels are not equal to CSS pixels”. Instead you have to fight through a whole forest of media query rules.