As the design community moves to design applications & interfaces for mobile devices, a new problem has arisen: Varying Screen DPI's. Here's the situation:

Touch:

* iPhone 3G/S ~ 160 dpi
* iPhone 4 ~ 300 dpi
* iPad  ~ 126 dpi
* Android device @ 480p ~ 200 dpi

Point / click:

* Laptop @ 720p ~ 96 dpi
* Desktop @ 720p ~ 72 dpi

There is certainly a clear distinction between desktop and mobile so having two separate front-ends to the same app is logical, especially when considering one is "touch"-based and the other is "point/click"-based.

The challenge lies in designing static graphical elements that will scale between, say, 160 dpi and 300+ dpi, and get consistent and clean design across zoom levels. Any thoughts on how to approach this? Here are some scenarios, but each has drawbacks as well:

* Design a single set of assets (high resolution), then adjust zoom levels based on detected resolution / device
      o Drawbacks: Performance caused by code layering, varying device support of Zoom
* Develop & optimize multiple variations of image and CSS assets, then hide / show each based on device
      o Drawbacks: Extra work in design & QA.

Anyone have thoughts or experience on how to deal with this? We should certainly be looking at methods that use / support HTML5 and CSS3.