You are viewing an older version of Mapbox.js. Check out v3.1.1 for the latest.

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