Page MenuHomePhabricator
Create Task
Maniphest T34095

MobileFrontend icons are upsampled or blocky on high-dpi Android & iPhone Retina displays
Closed, InvalidPublic
Actions

Description

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!)

Version: unspecified
Severity: enhancement

Details

Reference
bz32095

Related Objects
Search...

Event Timeline

• bzimport raised the priority of this task from to Medium.Nov 22 2014, 12:03 AM
• bzimport added a project: MobileFrontend-Feature-requests.
• bzimport set Reference to bz32095.
• bzimport added a subscriber: Unknown Object (MLST).
• brooke created this task.Oct 31 2011, 6:48 PM
• brooke added a comment.Oct 31 2011, 6:49 PM

Created attachment 9331
Screenshot in iOS 5 simulator set to iPhone w/ Retina display

Attached:

iOS_Simulator_Screen_shot_Oct_31,_2011_11.43.20_AM.png (960×640 px, 176 KB)

• brooke added a comment.Oct 31 2011, 6:50 PM

Created attachment 9332
Screenshot on Nexus 1, Android 2.3.6 (Android hdpi - 240dpi)

Attached:

device-2011-10-31-113827.png (800×480 px, 58 KB)

• brooke added a comment.Oct 31 2011, 7:00 PM

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).

• brooke added a comment.Dec 4 2011, 5:58 PM

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.

Jdlrobson added a comment.Sep 18 2012, 5:29 AM

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.

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL