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
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?