--- layout: api title: "v1.6.2 API: Mobile" categories: api version: v1.6.2 permalink: /api/v1.6.2/mobile --- {% raw %}
Mapbox.js is optimized for mobile devices and small screens by default. There are, however, best practices to make sure your map always looks its best.
Modern mobile browsers now support scaling of webpages by leveraging the meta
tag viewport
. This enlarges the window making your map look better on a
mobile device. Simply include this in the head of your document:
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
If you're planning on having a page that has large amounts of scrolling,
try to avoid a large map height. Having a 'tall' map can cause the user
to get stuck on the map while scrolling. Another way around this is to disable
dragging
for mobile devices: map.dragging.disable();
Having the ability to use retina tiles when the device supports them is easy.
When creating the map, use the detectRetina
to verify if retina is available
and retinaVersion
to use a tilelayer which is designed for retina screens.
var map = L.mapbox.map('map', 'your.mapid', {
tileLayer: {
detectRetina: true,
retinaVersion: 'your.mapid'
}
}).setView([40, -74.50], 9);
Some Mapbox maps support switching to retina scale automatically: if you're using
one of these maps, you can simply set detectRetina
and the higher-scale
tiles will be used when retina is detected.
var map = L.mapbox.map('map', 'your.mapid', {
tileLayer: {
detectRetina: true
}
}).setView([40, -74.50], 9);
{% endraw %}