--- layout: api title: "v1.6.0 API: Mobile" categories: api version: v1.6.0 permalink: /api/v1.6.0/mobile --- {% raw %}

Mobile

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.

Viewport

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' />

Scrolling

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();

Retina

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 %}