Last modified: 2014-02-12 23:45:56 UTC
The UI graphics for MobileFrontend are only available at raw CSS-pixel size; this is fine on medium-dpi devices (classic & 3G/s iPhone, some Android phones) but shows blurry upsampling on Android high-dpi (hdpi / 240dpi) devices like the Nexus 1 and is either blocky or blurry on iPhone 4 / Retina display (320dpi). Should provide graphics for 160, 240, and 320dpi (1x, 1.5x, and 2x the resolution of CSS pixels at 1:1 web zoom) and use appropriate media queries. Or, you know, SVG. Fricking Android! GARRRRR (Note that images within articles, including rendered math and uploaded photos, have the same problem, but it'll likely be more work to figure out how to treat those!)
Created attachment 9331 [details] Screenshot in iOS 5 simulator set to iPhone w/ Retina display
Created attachment 9332 [details] Screenshot on Nexus 1, Android 2.3.6 (Android hdpi - 240dpi)
Created bug 32096 to cover images in the content; making it depend on this bug as infrastructure for detecting resolution & swapping out images will likely be in common, and the UI gfx will be easier to do (no need to mess about with content stuff).
r105120 / r105121 adds 1.5x (hdpi) and 2.x (xhdpi, retina display) versions of the search icon and invokes them as appropriate in the 'android' and 'iphone' stylesheets. Also an SVG master is included which can be used to make more versions. Icon is visibly much sharper on my Nexus 1 (hdpi) and iPod Touch (retina display). Note that there appear to be many duplicate or near-duplicate style sheets; the android, iphone, webkit, and default styles should probably all be merged into a single sheet.
This relates to the old UI so closing. I suggest we document best practices for ensuring we support retina displays well in future and reopen bugs detailing which of the new graphics need fixing up if necessary.
