如何在移动设备上扩展Folium地图尺寸以填充空白区域？

问题根源是移动端缺少视口适配，加上地图容器高度未正确设置，导致竖屏时无法填满屏幕空间。以下是具体修复步骤：

1. 优化HTML页面的基础配置 #

修改index.html，添加视口适配标签并设置全局样式，确保页面能铺满屏幕：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- 添加视口标签，适配移动端设备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地图应用</title>
    <style>
        /* 消除默认边距，设置根元素高度为100% */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden; /* 避免页面滚动 */
        }
        /* 强制地图容器填满屏幕 */
        .folium-map {
            height: 100vh !important; /* 用视口高度确保铺满屏幕 */
            width: 100% !important;
        }
    </style>
</head>
<body>
    {{ current_map | safe }}
    <!-- 可选：页面加载后触发地图重绘，解决部分设备加载时的尺寸计算问题 -->
    <script>
        window.addEventListener('load', () => {
            window.dispatchEvent(new Event('resize'));
        });
    </script>
</body>
</html>

2. 调整Folium地图的渲染逻辑 #

修改后端代码，确保地图容器的高度设置生效：

current_map = folium.Map(location=start_location, zoom_start=6)
# 使用100vh作为容器高度，适配移动端视口
fig = branca.element.Figure(height="100vh")
fig.add_child(current_map)
# 传递整个Figure的HTML，而非单独的地图对象
context = {"current_map": fig._repr_html_()}
return render(request, template_name="index.html", context=context)

关键说明 #

• viewport标签确保页面在移动端以正确比例渲染，避免缩放异常
• 100vh（视口高度）代替100%，确保地图高度不受父元素布局影响，直接填满屏幕
• 页面加载时触发resize事件，强制Folium重新计算地图尺寸，解决部分设备加载时的空白问题

内容的提问来源于stack exchange，提问作者Vitalii Mytenko