OpenStreetMap

Blurry map on mobile devices

Posted by ndrw6 on 22 May 2020 in English (English)

Mobile version of openstreetmap.org looks rather blurry on my mid dpi screen (1920x1080 on a 10” tablet). This is caused by rendering the page images at a lower resolution and then scaling them up to a native screen resolution. Resizing algorithm uses interpolation, resulting in a blurry image. Another issue is that menus/panels occupy disproportionately large area of the screen, leaving little space for the map, but I guess that is subjective.

A solution/workaround to both is to open about:config in mobile Firefox (I don’t know how to achieve it in other browsers) and change layout.css.devPixelsPerPx to 1.

Note that this will also make all web content look smaller - that works for me on my device but on a phone with a 1920x1080+ resolution the result will probably be unreadable.

Not sure if this is fixable on the server side. I can imagine the osm website requesting the browser not to scale the images (does such mechanism exist?) and providing another set of pre-rendered tiles for high dpi screens. A long term solution would be to have a vector map widget, then screen resolution would be handled by the browser alone.

Login to leave a comment