移动设备全屏支持说明

一般设备常见有两种方式的全屏

1、屏幕全屏 在设备屏幕范围内全屏,没有浏览器的导航栏等界面,需要浏览器提供接口支持。有以下两种接口:

  • Fullscreen API:可以对任意元素使用,全屏后该元素占满屏幕,不同浏览器可能会添加不同样式
  • webkitEnterFullScreen:仅对 video 元素使用,全屏后使用系统自带的播放器界面

2、网页全屏 界面元素占满浏览器 viewport 范围,全屏后仍可以看到浏览器的地址栏等界面 不同设备对全屏 API 的支持情况:

1) iPad

  • Chrome:不支持非 <video/> 元素全屏,使用 webkitEnterFullscreen 进入全屏
  • Safari:支持视频元素全屏,IOS 12.0 版本后支持任意元素进入全屏
  • FireFox:仅支持视频元素全屏

2)iPhone

不支持 Fullscreen API,关闭旋转锁定并横置设备后大多数浏览器会隐藏部分浏览器界面:

  • Safari:隐藏 Toolbar,NavigationBar,文档触顶滚动后显示 NavigationBar
  • Chrome:隐藏 Toolbar,文档向下滚动后 NavigationBar 仅显示域名
  • Firefox:行为与 Safari一致

3) Android

支持 Fullscreen API,可支持任意元素全屏

4)运行桌面浏览器的设备

通常支持 Fullscreen API,可支持任意元素全屏 iPhone Safari 设备横置后浏览器UI隐藏(上)与显示(下

常见问题-1

iPad 设备视频全屏(显示系统自带视频播放控件)

常见问题-2

iPad 设备(IOS 12.0 以上版本)非视频元素全屏 常见问题-3

商务咨询:4008037298