在智能手机中全屏打开传单弹出窗口

Question

我无法弄清楚如何配置CSS以使弹出窗口在我的Leaflet App中全屏显示，以防人们从具有小屏幕的设备访问它。到目前为止，我发现的所有内容都是如何调整popup-wrapper的大小。 “宽度：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; } 
}

Answer 1

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

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

position
fixed
<!-- HTML -->
<div id='map'></div>
<div id='fullScreenInfo'></div>
此外，您应该添加一些UI元素，以便用户在显示时关闭“全屏弹出窗口”（应该调用/* CSS */
#fullScreenInfo { display: none; }
@media (max-width: 768px) { #fullScreenInfo.visible { display:fixed; left:0; right: 0; top:0; bottom: 0; } }
。]