在智能手机中全屏打开 Leaflet Popup答案

【问题标题】：Open Leaflet Popup fullscreen in smartphones在智能手机中全屏打开 Leaflet Popup
【发布时间】：2020-06-02 11:59:07
【问题描述】：

我不知道如何配置 CSS 以使弹出窗口在我的 Leaflet 应用程序中全屏打开，以防人们从小屏幕设备访问它。到目前为止我发现的一切都是如何调整弹出包装的大小。 “宽度：100％，高度：100％”对我不起作用。

.popupCustom{
    font-family: Verdana;
    font-size: 13px;
    width: 330px;
}
@media (min-width: 768px) and (max-width: 991px) {
    .leaflet-popup-content-wrapper {
        width: 250px;} }
@media (min-width: 992px) and (max-width: 1199px) {
    .leaflet-popup-content-wrapper {
        width: 280px; } }
@media (min-width: 1200px) {
    .leaflet-popup-content-wrapper {
        width: 330px; } 
}

【问题讨论】：

标签： css leaflet popup

【解决方案1】：

无法完成。 Leaflet 弹出窗口包含在应用了 CSS transform 的块元素中（即地图窗格），因此设置 CSS position property to fixed 的常用技术将无法使弹出窗口远离其包含块。

您将不得不求助于其他解决方案，例如在地图容器之外添加另一个 HTML 块元素，更新其内容以模仿弹出窗口的内容，并根据视口大小有条件地显示所述元素或弹出窗口，例如：

<!-- HTML -->
<div id='map'></div>
<div id='fullScreenInfo'></div>

/* CSS */
#fullScreenInfo { display: none; }
@media (max-width: 768px) { #fullScreenInfo.visible { display:fixed; left:0; right: 0; top:0; bottom: 0; } }

/* JS */
map.on('popupopen', function(ev){
  var el = document.getElementById('fullScreenInfo');
  el.innerHTML = ev.popup.getContent();
  el.classList.add('visible');
});
map.on('popupclose', function(ev){
  var el = document.getElementById('fullScreenInfo');
  el.classList.remove('visible');
});

另外，您应该为用户添加一些 UI 元素，以便在显示时关闭“全屏弹出窗口”（可能会调用 map.closePopup()）。

【讨论】：