Editable leaflet design - create different zoom levels for different screen sizes using JavaScript

Question

I'm new to Leaflet, but started with the free MapBox. I created a website with media queries.

I added a MapBox to my index file with the following code:

<section id="map_section">
     <div id='map'></div>
     <script>

       var map = L.mapbox.map('map', 'pandora.hn8og4ae', {
           scrollWheelZoom: false,
           minZoom: 5,
           maxZoom: 18
       }).setView([45, -67.874], 8);

     </script>
 </section>

On smaller screen sizes (mobile devices), I would like map initiation to start at a different zoom level because I don’t have enough screen to show all my markers at the same time. How would you do this in css? A helpful person at MapBox suggested the following:

You will need to do this programmatically in JavaScript, waiting for the window to resize and set map.setZoom (NUMBER) when the user screen reaches a certain size.

Could someone skip me how to do this?

JavaScript , .:) "" , . , MapBox, .

Answer 1

javascript,

// listen for screen resize events
window.addEventListener('resize', function(event){
    // get the width of the screen after the resize event
    var width = document.documentElement.clientWidth;
    // tablets are between 768 and 922 pixels wide
    // phones are less than 768 pixels wide
    if (width < 768) {
        // set the zoom level to 10
        map.setZoom(10);
    }  else {
        // set the zoom level to 8
        map.setZoom(8);
    }
});

, , , , ...