2

I'm using leaflet with OSM for two different web mapping projects and have the same problem with both. On both, I set bounds and zoom limits and create the map, and they work nicely on my laptop (Chrome 56.0.2924.87 (64-bit) on Windows 8.1). However, there are problems on mobile: the scaling appears to be wrong, as if it were zoomed to 150%, so that text in the map and images both in the map and elsewhere are blurry, and leaflet controls positioned in bottom-right or bottom-left appear slightly off the edge of the screen. However, this doesn't change if I manually change the scaling in the browser on mobile, and isn't affected by having the line:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

in my code or

body{zoom:100% !important;}

in my css. This happens exactly the same on Chrome on Android on a couple of different phones and on Safari on iOS.

You can see one of the two sites here (still very beta in lots of ways): https://cymraeg.ling.cam.ac.uk/?map=6

Any ideas why this might be happening?

1

There is a padding set to 1px for #mapdiv in your styles.css file. Removing it solves the control problem.

Text is not blurry with Firefox on my phone and laptop.

1
  • thanks very much indeed for this! this solves some other problems I've been having with firefox on windows/mac, but hasn't changed the position of the control in the bottom left (off the bottom of the screen) for me, nor the blurriness. To demonstrate, here is a screenshot from chrome in windows with mobile view from the developer tools: i.imgbox.com/5WRZ6mMp.png. and here is a screenshot from chrome on android: i.imgbox.com/QVS93hVr.png. you can see that the control is positioned wrongly and the map times are blurry, as if scaled.
    – tzirtzi
    Apr 3 '17 at 10:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.