如何解决Python Folium地图在移动端竖屏的缩放适配问题

问题背景 #

• 部署环境：PythonAnywhere上的Flask+Folium地图应用，支持捕获鼠标点击坐标调用气象API（仅西经60°至东经80°区域可用）
• 异常表现：桌面端、移动端横屏显示正常，移动端竖屏时地图及缩放按钮无法适配屏幕缩放
• 无效尝试：通过m.get_root().header.add_child()添加viewport元标签，因Folium生成iframe结构导致标签失效

核心问题原因 #

Folium的_repr_html_()方法返回的是包含iframe的HTML片段，直接返回该片段时，添加到Folium内部的viewport元标签仅作用于iframe内部文档，无法影响外层页面的移动端缩放规则，导致竖屏适配失效。

修复方案 #

不再直接返回Folium生成的HTML片段，而是构造完整的HTML页面，将viewport元标签放在外层页面头部，同时确保地图容器占满屏幕：

修改后的核心代码 #

import folium, branca
from flask import Flask, make_response
from folium.plugins import LocateControl

app = Flask(__name__)
app.config["DEBUG"] = True

@app.route('/')
def index():
    start_coords = (38, -8)
    # 使用视窗单位确保地图占满屏幕
    fig = branca.element.Figure(height="100vh", width="100vw")

    m = folium.Map(location=start_coords, zoom_start=4, max_bounds=True)
    e = folium.LatLngPopup()
    m.add_child(e)
    LocateControl(strings={'drawMarker':'false'}).add_to(m)
    fig.add_child(m)

    # 构造完整HTML页面，在外层添加viewport元标签
    html_content = f"""
    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <style>
            body {{ margin: 0; padding: 0; overflow: hidden; }}
        </style>
    </head>
    <body>
        {m._repr_html_()}
    </body>
    </html>
    """
    return make_response(html_content)

关键调整说明 #

1. 外层HTML包裹：通过构造完整HTML页面，将viewport元标签放在外层<head>中，让移动端浏览器正确识别页面尺寸规则
2. 视窗单位设置：将Figure的高度和宽度设为100vh/100vw，确保地图占满整个视窗
3. 页面样式优化：去除body的默认边距和滚动条，避免地图出现不必要的留白或滚动

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