`r`n
经纬志
`r`n
`r`n
首页 / OpenLayers / 使用示例
`r`n

移动端全屏

地图铺满可视区域,用按钮进入系统全屏,去掉多余控件后触控区域更大。

OpenLayers 10.3.1 · 更新 2026-10-27
`r`n
源码与运行效果
运行效果
`r`n

说明

移动端要让地图真正铺满,得同时处理 viewport 与容器高度: 页面用 height:100% 贯穿 html、body 与地图容器, 再配合 requestFullscreen() 进入系统级全屏。

控件精简到只剩缩放,避免小屏上按钮互相挤压; 状态栏显示当前视口尺寸,便于确认全屏前后变化。

操作结果
点「进入全屏」地图铺满屏幕,状态栏显示新的视口尺寸
拖动与双指缩放触控手势直接可用,无需额外配置
按 Esc 或再点按钮退出全屏,尺寸恢复

iOS Safari 对非视频元素的全屏支持有限,必要时用隐藏地址栏的滚动方案,并给底部留出安全区。

`r`n
`r`n