I went ahead and did a quick mockup for some modified JavaScript and CSS for image pages. Here's a live demo:<br><br><a href="http://toolserver.org/~brion/mockups/mobile-imagepage/">http://toolserver.org/~brion/mockups/mobile-imagepage/</a><br>
<br>This is using the current existing File: page markup and modifying it with CSS and JavaScript:<br>* the extra data sections are hidden by default except for the image, so they don't get in the way<br>* link bar at top is reformatted and links are used to show/hide each section instead of jumping around<br>
* the image itself is sized down to fit the screen, but using the same medium-resolution version that we started with<br><br>I also changed the viewport settings to allow zooming in, which we've been thinking about doing anyway.<br>
<br>Result is:<br>* by default there's less clutter on screen<br>* by default the image fits<br>* auto-scales to fit when changing orientation<br>
* on high-resolution screens (iOS with Retina display, Android with 240dpi or 320dpi display) the picture appears much sharper<br>* can zoom in for more detail with standard pinch-to-zoom<br><br>Confirmed that it works in at least iOS 5 Safari and Android 2.3.6 Browser, haven't tested all other things.<br>
<br>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).<br>
<br>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<br><br>-- brion<br><br>