У меня возникла проблема с макетом HTML/CSS, из-за которой элемент карты (#map
) не отображается на маленьких экранах, а настройки карты (map-settings
) видны. Вот упрощенная версия моего кода:
<!-- index.html -->
<!DOCTYPE html>
<html lang = "en">
<head>
<!-- Meta tags and title -->
</head>
<body>
<div class = "content-wrapper">
<div class = "content-wrapper-inner">
<div class = "main-content">
<div id = "map"></div>
<div class = "map-settings" id = "map-settings">
<!-- Map settings content -->
</div>
</div>
<div class = "sidebar-content">
<!-- Sidebar content -->
</div>
</div>
</div>
</body>
</html>
CSS:
/* index_page.css */
/* Ensure the map takes up full height of its container */
#map {
flex: 1;
width: 100%;
height: 100%; /* Add this line to ensure the map fills its container's height */
}
/* Ensure the map settings remain visible on smaller screens */
.map-settings {
background: white;
padding: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
margin-bottom: 20px; /* Adjust margin to create space between map and settings */
z-index: 1000;
}
/* Ensure proper layout on smaller screens */
@media (max-width: 768px) {
.content-wrapper-inner {
flex-direction: column;
}
.main-content {
width: 100%;
}
#map {
flex: 1;
height: 300px; /* Set a fixed height for the map on smaller screens */
}
.sidebar-content {
width: 100%;
}
}
Я заметил, что при уменьшении ширины экрана карта исчезает, а настройки карты остаются видимыми. Я пробовал настроить свойства CSS и медиа-запросы, но мне не удалось заставить карту правильно отображаться на маленьких экранах.
Вот как это выглядит на экранах ПК:
Вот как это объявление выглядит на экранах мобильных устройств:
Вы можете видеть, что на экранах мобильных устройств отображаются только настройки карты. Настоящая карта отсутствует.
Я пробовал играть со свойством overflow
, но сделать так, как должно быть, мне не удалось.
А еще карта от leaflet
, если это вам поможет.
Может кто-нибудь помочь мне понять, почему карта не отображается на маленьких экранах и как я могу решить эту проблему? Любые идеи или предложения будут с благодарностью приняты. Спасибо!
Более подробную информацию предоставлю по запросу.
Основная проблема заключается в том, что элемент #map не имеет явно заданной высоты для небольших экранов, что приводит к его сворачиванию и неправильному отображению.
Вот обновленный CSS, который гарантирует, что элемент #map имеет явную высоту на небольших экранах:
#map {
flex: 1;
width: 100%;
height: 100%;
}
@media (max-width: 768px) {
.content-wrapper-inner {
flex-direction: column;
}
.main-content {
width: 100%;
}
#map {
flex: 1;
height: 300px;
}
.sidebar-content {
width: 100%;
}
}
Элемент #map не имел явно заданной высоты для меньших экранов, поэтому он исчезал при уменьшении размера экрана. Добавив фиксированную высоту (высота: 300 пикселей;) для #map в медиа-запросе для экранов с максимальной шириной 768 пикселей, теперь карта будет иметь видимую высоту на экранах меньшего размера.
Надеюсь это поможет.
Я не знаю, предоставили ли вы недостающий код или нет, но когда я копирую ваш код в песочницу, он действительно работает на мобильных устройствах, но не на настольных компьютерах (полностью противоположно вашей проблеме).
Это потому, что вы заставляете карту заполнять контейнер, но контейнер карты (.main-content
) не имеет высоты. Итак, на настольном компьютере он отображается неправильно, но на мобильном устройстве он отображается идеально только потому, что вы установили его высоту на 300 пикселей. Чтобы гарантировать, что .main-content
имеет высоту, мы можем создать его контейнер flex
и убедиться, что он имеет высоту, присвоив себе aspect-ratio
(или вы можете напрямую указать точную высоту).
Попробуйте что-нибудь вроде этого.
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href = "https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
/* index_page.css */
.content-wrapper-inner{
display: flex;
}
/* Ensure the map takes up full height of its container */
#map {
width: 100%;
height: 100%; /* Add this line to ensure the map fills its container's height */
}
.sidebar-content {
flex: 1;
}
.main-content {
flex: 3;
aspect-ratio: 1;
}
/* Ensure the map settings remain visible on smaller screens */
.map-settings {
background: white;
padding: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
margin-bottom: 20px; /* Adjust margin to create space between map and settings */
z-index: 1000;
}
/* Ensure proper layout on smaller screens */
@media (max-width: 768px) {
.content-wrapper-inner {
flex-direction: column;
}
.main-content {
aspect-ratio: auto;
}
#map {
height: 300px; /* Set a fixed height for the map on smaller screens */
}
}
<div class = "content-wrapper">
<div class = "content-wrapper-inner">
<div class = "main-content">
<div id = "map"></div>
<div class = "map-settings" id = "map-settings">
map settings
</div>
</div>
<div class = "sidebar-content">
sidebar
</div>
</div>
</div>
<link rel = "stylesheet" href = "https://unpkg.com/[email protected]/dist/leaflet.css" integrity = "sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY = " crossorigin = "" />
<script src = "https://unpkg.com/[email protected]/dist/leaflet.js" integrity = "sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo = " crossorigin = ""></script>