问题
I'm using bootstrap to set up a leaflet map. Works great on browsers so far, but does not display at all on a mobile.
Tried the invalidateSize(); work around to no avail (Leaflet map not displayed properly inside tabbed panel)
See code below.
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="icon-bar"></span></button>
<a class="navbar-brand" href="http://www.url.com">hello!!!</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li> <a href="#aboutModal" data-toggle="modal"> <i class="fa fa-connectdevelop" style="color: white"></i> Info</a></li>
</ul>
</div><!--/.navbar-collapse -->
</div> <!-- navbar navbar-inverse navbar-fixed-top -->
<div id="map"></div>
<div class="modal fade" id="aboutModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<ul id="aboutTabs" class="nav nav-tabs">
<li class="active"> <a href="#about" data-toggle="tab"><i class="fa fa-bookmark"></i>About this GeoPortal</a></li>
<li> <a href="#disclaimer" data-toggle="tab"><i class="fa fa-info-circle"></i>Disclaimer</a></li>
<li><a href="#legend1" data-toggle="tab"><i class="fa fa-barcode"></i>Legend</a></li>
</ul>
<div id="aboutTabsContent" class="tab-content" style="padding-top: 10px; text-indent: 0px; -webkit-box-shadow: 0px 0px; box-shadow: 0px 0px; margin-right: autopx; margin-left: auto; margin-top: auto; margin-bottom: auto; padding-left: 0px; /* [disabled]border-color: #D1D1D1; */">
<div class="tab-pane fade active in" id="about">
<p>This says something.</p>
</div>
<div class="tab-pane fade text-danger" id="disclaimer">
<p>something here</p>
</div>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
L.mapbox.accessToken = 'token';
var map = L.map('map').setView([10.5063,-61.4079], 10);
var streets = L.mapbox.tileLayer('url').addTo(map);
var drivetimes = L.mapbox.tileLayer('url');
var outlets = L.mapbox.tileLayer('url');
var layer1={"Streets":streets};
var layer2={"Drive Times":drivetimes,"Outlets":outlets};
var layerControl=L.control.layers(layer1,layer2).addTo(map);
map.attributionControl.setPrefix('©<a href="http://www.myurl.com">Copyright 2006-2015. hello!!! Limited</a>');
L.control.locate().addTo(map);
if(document.body.clientWidth<=767){var isCollapsed=true}else{var isCollapsed=false}var sidebar=L.control.sidebar("sidebar",{closeButton:true,position:"left"}).addTo(map);
if(navigator.appName=="Microsoft Internet Explorer"){$("input").each(function(){if($(this).val()==""&&$(this).attr("placeholder")!=""){$(this).val($(this).attr("placeholder"));
$(this).focus(function(){if($(this).val()==$(this).attr("placeholder"))$(this).val("")});
$(this).blur(function(){if($(this).val()=="")$(this).val($(this).attr("placeholder"))})}})}
</script>
</body>
this is the main css file:
html, body, #map {height: 100%;width: 100%;overflow: hidden;}
body {padding-top: 50px;}
input[type="radio"], input[type="checkbox"] {margin: 0;}
#loading {position: absolute; width: 220px; height: 19px; top: 50%; left: 50%; margin: -10px 0 0 -110px; z-index: 20001;}
.leaflet-control-layers label { font-weight: normal; margin-bottom: 0px;}
.table { margin-bottom: 0px;}
.navbar .navbar-brand { font-weight: bold; font-size: 25px; color: #3CFF8F!important;}
.navbar-collapse.in { overflow-y: hidden;}
.typeahead { background-color: #FFFFFF;}
.tt-dropdown-menu { background-color: #FFFFFF; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 4px 4px 4px 4px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); margin-top: 4px; padding: 4px 0; width: 100%; max-height: 300px; overflow: auto;}
.tt-suggestion { font-size: 14px; line-height: 20px; padding: 3px 10px;}
.tt-suggestion.tt-cursor { background-color: #0097CF; color: #FFFFFF; cursor: pointer;}
.tt-suggestion p { margin: 0;}
.tt-suggestion + .tt-suggestion { border-top: 1px solid #0097CF;}
.typeahead-header { margin: 0 5px 5px 5px; padding: 3px 0; border-bottom: 2px solid #333;}
.has-feedback .form-control-feedback { position: absolute; top: 0; right: 0; display: block; width: 34px; height: 34px; line-height: 34px; text-align: center;}
.leaflet-popup-content { margin-top: 1px; margin-bottom: 1px; margin-left: 2px; margin-right: 2px; background:#000!important; font-weight:bold; font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;}
.leaflet-popup-content-wrapper { border-radius: 0px; border-color:transparent!important; border:none; opacity:0.7; color:#fff!important; size:auto!important;}
.leaflet-sidebar { z-index: 1020;}
.leaflet-sidebar .close { right: 0px; top: 5px; background: transparent;}
.leaflet-control-locate {border: 1px solid rgba(0,0,0,0.4);}
.leaflet-control-locate a {background-color: #fff;background-position: -3px, -2px;}
.leaflet-control-locate.active a {background-position: -33px -2px;}
@media (max-width: 992px) { .navbar .navbar-brand {font-size: 18px; }}
@media (max-width: 767px){ .url-break {word-break: break-all; word-break: break-word;-webkit-hyphens: auto;hyphens: auto; }}
@media print { .navbar {display: none !important; } .leaflet-control-container {display: none !important; }}
回答1:
the maps now work.
the issue was http/https. two things had to be changed.
1) the method of calling the tiles and associated php script initially, i used tileserver.php to call
'Streets':L.tileLayer('[url]url/[mbtiles file name].tilejson'
now i'm using mbtiles-server.php to call
'Streets':L.tileLayer("[url]/mbtiles-server.php?db=[mbtiles file name].mbtiles&z={z}&x={x}&y={y}.png")
note: php script had to be in the same folder/directory as the mbtiles file. also, replace text in [] with your own
2) leaflet css/js was used only, no mapbox as the api uses a secure key
much thanks again @iH8 for the excellent work!
来源：https://stackoverflow.com/questions/28797937/how-can-i-fix-bootstrap-leaflet-map-mobile-display