我无法弄清楚如何配置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; }
}
无法完成。 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; } }
。]