首页 / OpenLayers / 使用示例
`r`n 移动端全屏
地图铺满可视区域,用按钮进入系统全屏,去掉多余控件后触控区域更大。
`r`n
源码与运行效果
说明
移动端要让地图真正铺满,得同时处理 viewport 与容器高度:
页面用 height:100% 贯穿 html、body 与地图容器,
再配合 requestFullscreen() 进入系统级全屏。
控件精简到只剩缩放,避免小屏上按钮互相挤压; 状态栏显示当前视口尺寸,便于确认全屏前后变化。
| 操作 | 结果 |
|---|---|
| 点「进入全屏」 | 地图铺满屏幕,状态栏显示新的视口尺寸 |
| 拖动与双指缩放 | 触控手势直接可用,无需额外配置 |
| 按 Esc 或再点按钮 | 退出全屏,尺寸恢复 |
iOS Safari 对非视频元素的全屏支持有限,必要时用隐藏地址栏的滚动方案,并给底部留出安全区。