With Mapbox GL JS, is there a way to specify a different zoom level for mobile devices? I found two examples, both from the older mapbox.js (links below), but I can't seem to translate them to GL JS and get them to work for me.

https://stackoverflow.com/questions/24087638/how-can-i-resize-my-map-according-to-the-device-width/24091293 https://stackoverflow.com/questions/23910594/leaflet-responsive-design-creating-different-zoom-levels-for-different-screen

For reference, this is the issue that I'm having. On desktop, the zoom level shows the appropriate features:

enter image description here

But then on mobile, it looks like this:

enter image description here

I would like to try to get it to show at smaller zoom level when loaded on mobile devices.

1 Answer 1


I figured it out just after posting but figured I'd leave it up in case other people run into this in the future.

var mq = window.matchMedia( "(min-width: 420px)" );

if (mq.matches){
    map.setZoom(14.34); //set map zoom level for desktop size
} else {
    map.setZoom(11); //set map zoom level for mobile size

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.