Mobile code snippets - nrenner/brouter-web GitHub Wiki

Leaflet

internal browser/feature detection: L.Browser. (mobile, touch, retina, ...)
leaflet-touch CSS class, (L.Browser.touch ? ' leaflet-touch' : '') +
@media (pointer: coarse) {

Control.Layers.js:

  if (!L.Browser.touch) {
    L.DomEvent
      .disableClickPropagation(container)
      .disableScrollPropagation(container);
  } else {
    L.DomEvent.on(container, 'click', L.DomEvent.stopPropagation);
  }

Bootleaf

https://github.com/bmcbride/bootleaf

index.html

<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">

https://github.com/bmcbride/bootleaf/blob/master/assets/js/app.js

/* Hide sidebar and go to the map on small screens */
if (document.body.clientWidth <= 767) {
  $("#sidebar").hide();
  map.invalidateSize();
}

// Leaflet patch to make layer control scrollable on touch browsers
var container = $(".leaflet-control-layers")[0];
if (!L.Browser.touch) {
  L.DomEvent
  .disableClickPropagation(container)
  .disableScrollPropagation(container);
} else {
  L.DomEvent.disableClickPropagation(container);
}

function sizeLayerControl() {
  $(".leaflet-control-layers").css("max-height", $("#map").height() - 50);
}

https://github.com/bmcbride/bootleaf/blob/master/assets/css/app.css

@media (max-width: 992px) {
  .navbar .navbar-brand {
    font-size: 18px;
  }
}
@media (max-width: 767px){
  #sidebar {
    display: none;
  }
  .url-break {
    word-break: break-all;
    word-break: break-word;
    -webkit-hyphens: auto;
      hyphens: auto;
  }
  .dropdown-menu a i{
    color: #FFFFFF;
  }
}
/* Print Handling */
@media print {
  .navbar {
    display: none !important;
  }
  .leaflet-control-container {
    display: none !important;
  }
}