Linked by Thom Holwerda on Sat 17th Dec 2011 00:17 UTC
Thread beginning with comment 500466
To view parent comment, click here.
To read all comments associated with this story, please click here.
To view parent comment, click here.
To read all comments associated with this story, please click here.
Yes there is. Otherwise printing web-pages wouldn't work. DPI is ignored in the standard zone of 75-150, and is only enforced for print DPI of 300+
Practically what happens is that CSS uses a fixed DPI of 96, but on high resolution devices, the pixels (px value) becomes multiple pixels.
In short:
On normal DPI a pixel is a pixel, but inches and centimeters varies.
On high DPI, an inch is an inch, and centimeter is a centimeter but pixels are often more than pixel.
Yes, the web is weird, but there are rules for handling the crazy.
There are no DPI settings for the web, now are there? I have a 1600x900 display and I have to view all websites zoomed in 150% in firefox. I use an addon that makes that zoom level stick. For the most part websites look ok. Images, however, look blurred because they aren't designed for high resolutions.
Folks doing mobile application and web development targeting mobile devices will already be familiar with how this is being dealt with "correctly".
Many Android and Windows Phone devices have a 150% "scale factor" between logical or CSS pixels and the physical on-screen pixels. The iPhone 4 Retina display and some newer Android phones (eg Galaxy Nexus) have a 200% scale factor. This is roughly equivalent to zooming in 150% or 200% in a modern browser -- all the graphics are larger as well as the text, and indeed graphics that aren't designed for it may end up a little blurry because of the scaling.
Using scalable SVG graphics can resolve this but still isn't common (for one thing, Android's standard browser hasn't supported SVG on phones until the latest version 4.0!). CSS media queries can be used to check the logical DPI or scaling factor and switch in higher-resolution assets; you'll see this for instance on Google's mobile Gmail interface or Facebook's touch.facebook.com, where the icons come up at full resolution.
Currently, most desktop operating systems don't have an equivalent system-wide setting. Mac OS X has one (HiDPI mode in 10.7), but it's still "experimental" and you need to use debug tools to switch it on; only some software will show you things rendered at full resolution, while many other apps -- like old iPhone apps on an iPhone 4 -- will render at lower resolution and get zoomed up. If the rumors are true, presumably they'll make that enabled by default on the new laptops with super high-res screens, and -- like on iOS -- app developers will start adopting support for it at their own pace, while in the meantime many apps show pixelated but correctly sized.
Windows may now have an equivalent, though I haven't tested such things in ages -- traditionally you can change the logical DPI which bumps up font sizes and the sizes of things measured in "dialog units", but anything using fixed pixel sizes still ended up reaally tiny if you made the kind of large adjustment you'd need for 200+dpi screens.




Member since:
2009-05-23
There are no DPI settings for the web, now are there? I have a 1600x900 display and I have to view all websites zoomed in 150% in firefox. I use an addon that makes that zoom level stick. For the most part websites look ok. Images, however, look blurred because they aren't designed for high resolutions. So it's not just desktop applications that have to be updated. Websites do too. The problem is that lots of people are still at 1024x768 and so web developers face a tough choice.