横屏下视口高度计算异常源于浏览器动态UI和屏幕旋转导致innerHeight跳变，应优先用visualViewport.height替代，并在orientationchange/resize事件中调用地图重绘方法，同时避免viewport和CSS尺寸逻辑冲突。
横屏下视口高度计算异常，核心是浏览器动态 UI（地址栏、工具栏）和屏幕旋转导致 window.innerHeight 值跳变，而地图、全屏容器等依赖该值初始化或重绘时没及时响应——尤其在 iPad、Android 平板上，首次横屏或键盘弹出后常出现“只显示四分之一”“拖动错位”“底部被截”等问题。
用 visualViewport 替代 innerHeight 做真实可视高度判断
传统 window.innerHeight 在 iOS Safari 中无法反映键盘/地址栏收起后的实际可用高度；window.visualViewport 是专为此设计的 API，返回用户当前真正可见区域的高度（单位 CSS 像素），且会随键盘弹出、地址栏隐藏实时触发 resize 事件。
- 优先检测并使用：
const height = window.visualViewport?.height ?? window.innerHeight - 监听变化：
window.visualViewport?.addEventListener('resize', updateMapSize) - 注意兼容性：Android Chrome 61+、iOS Safari 15.4+ 支持；不支持时回退到
innerHeight+resize监听
横竖屏切换必须调用地图重绘方法
仅改 CSS 或容器尺寸不够，Leaflet、高德、百度地图 SDK 都缓存了初始容器尺寸。横屏后若不显式通知，地图图层仍按旧尺寸渲染，造成偏移或不可交互。
- Leaflet：
map.invalidateSize() - 高德地图：
map.resize() - 百度地图：
map.centerAndZoom()或map.setViewport()配合新尺寸 - 务必在
orientationchange和resize两个事件中都调用，iOS Safari 对前者支持更稳定
避免 viewport 和 CSS 尺寸逻辑冲突
常见错误是 meta viewport 写死宽度，或用 100vh 设地图容器高度——这两者都会在横屏时与 JS 获取的实际视口值脱节。
- viewport 必须写全：
，禁用 minimum-scale 或 width=768 - 地图容器高度不用
100vh，改用 JS 动态设：container.style.height = height + 'px' - 不用
%或vh直接控制地图父容器高度，尤其当父级是 Flex/Grid 时，要确认没加min-height: 0或overflow: hidden截断 canvas
横屏尺寸判断别依赖 screen.width
很多代码用 screen.width > screen.height 判断横屏，但在 iPad Pro 等设备上，screen.width 返回的是竖屏物理分辨率（如 1024），不是布局视口宽度，结果恒为 false。
- 正确方式：用
window.matchMedia("(orientation: landscape)").matches，兼容性好且语义准确 - 尺寸计算一律用
window.innerWidth/window.innerHeight（或visualViewport），它们反映的是 CSS 像素下的实际渲染区域 - 初始化地图前，确保 DOM 已就绪，并等待
DOMContentLoaded或至少load事件后再读取尺寸
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
