Mapbox GL JS - Is there a way to specify a different zoom level for mobile devices?

Question

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:

But then on mobile, it looks like this:

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

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