I went ahead and did a quick mockup for some modified JavaScript and CSS for image pages. Here's a live demo:
http://toolserver.org/~brion/mockups/mobile-imagepage/
This is using the current existing File: page markup and modifying it with CSS and JavaScript: * the extra data sections are hidden by default except for the image, so they don't get in the way * link bar at top is reformatted and links are used to show/hide each section instead of jumping around * the image itself is sized down to fit the screen, but using the same medium-resolution version that we started with
I also changed the viewport settings to allow zooming in, which we've been thinking about doing anyway.
Result is: * by default there's less clutter on screen * by default the image fits * auto-scales to fit when changing orientation * on high-resolution screens (iOS with Retina display, Android with 240dpi or 320dpi display) the picture appears much sharper * can zoom in for more detail with standard pinch-to-zoom
Confirmed that it works in at least iOS 5 Safari and Android 2.3.6 Browser, haven't tested all other things.
Checked in with Phil & Patrick -- we think this is a good direction to start with and should be easy to include in MobileFrontend extension (it's a conservative change that doesn't alter any HTML of the page itself, and just adds some CSS/JS that will be easy to keep and port in future).
Any comments, ideas? For instance the initial view could be made more 'image viewer'-y by centering things, removing some extra links or reformatting them, etc
-- brion