根本原因是 viewport 未适配横屏导致地图容器渲染尺寸与 JS 获取值不一致；应使用 window.innerWidth/Height、监听 orientationchange/resize 并调用 invalidateSize()、避免 transform/zoom、正确处理 devicePixelRatio。
地图容器宽高被 viewport 缩放干扰
HTML5 地图（比如 Leaflet、高德 JS API、百度地图 JS SDK）在 平板 横屏下常出现“地图只显示左上角四分之一”“拖不动”“缩放中心偏移”——根本原因是 viewport 元标签未适配横屏时的逻辑宽度，导致地图容器实际渲染尺寸与 JS 获取的 offsetWidth/offsetHeight 不一致。
实操建议：
立即学习 “ 前端免费学习笔记（深入）”；
- 检查
，确保包含width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no；去掉minimum-scale或硬 编码width=768这类值 - 避免用
%或vw/vh直接设地图容器高度，改用 JavaScript 动态计算：监听window.orientationchange和resize，再调用地图实例的invalidateSize()（Leaflet）或map.resize()（高德 / 百度） - 如果用了 CSS Flex/Grid 布局，确认父容器没有
min-height: 0或overflow: hidden截断了地图 canvas 层级
横屏时 screen.width 和 window.innerWidth 混用出错
很多开发者在初始化地图前用 screen.width 判断横竖屏，但平板横屏时 screen.width 可能返回竖屏物理值（如 iPad Pro 12.9 是 1024），而地图依赖的是布局视口宽度 window.innerWidth —— 两者差一倍，直接导致容器尺寸算错。
实操建议：
立即学习 “ 前端免费学习笔记（深入）”；
- 永远用
window.innerWidth和window.innerHeight计算地图容器尺寸，不用screen.width、screen.availWidth - 横竖屏判断应基于
window.matchMedia("(orientation: landscape)")，比读window.orientation更可靠（后者在 iOS Safari 中已废弃） - 地图初始化后首次调用
invalidateSize()前，加个setTimeout(……, 0)确保 DOM 渲染完成，否则可能取到旧尺寸
Canvas 渲染层被硬件加速强制缩放
iOS Safari 和部分 安卓 WebView 在横屏时会对 元素做隐式像素比修正（devicePixelRatio > 1），但地图 SDK 若没正确读取 devicePixelRatio 或未重置 canvas 的 width/height 属性，就会出现模糊、偏移、点击失灵。
实操建议：
立即学习 “ 前端免费学习笔记（深入）”；
- 手动设置 canvas 的
style.width和style.height为 CSS 像素值，同时将其width和height属性设为Math.round(实际 CSS 宽 * window.devicePixelRatio) - Leaflet 用户需确认是否启用了
preferCanvas: true，并在map.on("load", ……)后立即调map._initPathRoot()（非公开 API，慎用）；更稳妥是换回 SVG 渲染（默认） - 高德地图 JS API v2.x 需在
AMap.Map构造参数中显式传render: "canvas"或"svg"，别依赖自动探测
CSS transform 或 zoom 导致地图交互失效
为“适配横屏”强行给地图容器加 transform: scale(1.2) 或 zoom: 1.2，看似画面变大，实则让地图内部坐标系和 DOM 事件坐标彻底脱节——点击位置永远偏右下，手势缩放中心漂移。
实操建议：
立即学习 “ 前端免费学习笔记（深入）”；
- 绝对不要对地图容器使用
transform、zoom、scale()；缩放需求应通过地图 SDK 自身的setZoom()或fitBounds()实现 - 若必须做 UI 层缩放（比如整个页面等比放大），请用
viewport的initial-scale控制，并确保地图容器是position: relative且无嵌套 transform - 检查是否有全局 CSS 重置了
* {image-rendering: -webkit-optimize-contrast;}，这会干扰 canvas 像素对齐，在横屏下加剧偏移
真正卡住的点往往不是地图本身，而是横屏切换那一瞬间的 DOM 尺寸快照、设备像素比采样时机、以及 CSS 渲染流和 JS 执行流的微小不同步。盯住 invalidateSize() 调用时机和 devicePixelRatio 读取位置，比调样式更管用。
