Mobile and touch adaptation
Quick answer
This tutorial adapts a Leaflet map to phones, starting with 100dvh instead of 100vh and the viewport meta tag with viewport-fit=cover for safe areas. It reviews touch-related options such as touchZoom, inertia, doubleClickZoom and zoomControl, and shows how to enlarge hit areas to 44 logical pixels. It also resolves scroll-versus-drag conflicts with touch-action and re-measures the map after orientation changes.
Key points
- Size the map with 100dvh and add viewport-fit=cover for safe-area insets.
- Enlarge tappable targets to about 44 pixels with a transparent hit circle or a larger icon.
- Set touch-action: none on the container and call invalidateSize after rotation.
Example
html, body {
height: 100%;
margin: 0;
overscroll-behavior: none; /* 阻止下拉刷新与橡皮筋效果 */
}
#map {
height: 100vh; /* 老浏览器回退 */
height: 100dvh; /* 随地址栏变化 */
padding-bottom: env(safe-area-inset-bottom);
}<meta name="viewport"
content="width=device-width, initial-scale=1, viewport-fit=cover">Notes
- 100vh is measured with the address bar hidden, so the bottom controls get clipped.
- Safari may zoom the whole page on double tap; disable doubleClickZoom or use touch-action.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Mobile and touch adaptation. https://www.jingweizhi.com/en/leaflet/tutorials/mobile.html (accessed 2026-11-03).