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