iPad의 Safari에서 전체 화면을 표시하고 싶습니다.

어떤 안건에서는 Android에서 Chrome의 FullScreen API를 이용하면 완전한 풀 스크린 표시가 되어, 의사 앱으로서 HTML 표시를 할 수 있었지만, iOS라고 그대로는 움직이지 않았다. API를 지원하지 않습니까? 라고 생각해, iPad(iOS)에서도 움직이는 풀 스크린의 방법을 조사했습니다.

액세스 가이드를 이용한 방법

전시용으로 iPhone/iPad에서 웹페이지를 전체화면으로 표시한 채로 두는 방법(액세스 가이드) 에 있는, 액세스 가이드를 이용한 방법이라고 하면, 단지 프런트에서 표시하는 앱을 잠글 수 있을 뿐, 이른바 「풀 스크린」표시는 되지 않습니다.

전제로 내가 요구하는 전체 화면은

브라우저로부터의 표시(HTML)가 대상(JS의 setTimeout계도 제대로 움직인다)

주소 표시줄을 표시하지 않음

네비게이션 바 (화면 하단)를 표시하지 않음

그 상태에서 HTML 표시/조작을 할 수 있다

즉시 해제되지 않음

닫기 버튼이 표시되지 않습니다

액세스 가이드를 사용하는 방법은 주소 표시줄이 사라지지 않으므로 전체 화면이 아닙니다. (어쩌면 iPad(iOS)의 버전에 따라 거동이 달랐을지도)

홈에 추가 + meta를 사용하는 방법

또 하나, iOS에는 열려있는 페이지를 '홈에 추가'하여 의사 앱처럼 표시할 수 있습니다. 이 때 HTML에서 meta를 적절하게 작성하면 주소 표시줄을 숨길 수 있습니다.

iOS에서 웹사이트를 전체 화면으로 표시

  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

그러나 이것에는 단점이 있으며 JavaScript의 움직임에 상당히 제한이 있다는 것입니다. 자세하게 검증은 하고 있지 않습니다만, setTimeout(), setInterverl()등은 움직이지 않습니다. 즉, 앱처럼 움직일 수 없고, 그냥 그렇게 보이는 것만의 상태입니다. 링크 등도 탭하면 safari가 기동하는 등 링크의 궁리도 필요합니다.

검증 환경

이번 검증한 환경은 다음과 같습니다.

iPad mini 5세대 (iOS 12.4)

Mobile Safari 12.1.2

다음에 참고로 한 것이 Going Fullscreen On iPad Safari

여기를 보면 비교적 새로운 iPad+Safari라면 FullScreen API가 구현되고 있는 것 같습니다. 위 페이지의 코드를 바탕으로 필요한 최소한의 구현을 해 보았습니다.

샘플 코드

See the Pen iPad에서 FullScreen 테스트 by annnews ( @annnews )
on CodePen .

위의 CodePen을 실행하면 PC에서도 전체 화면이 되었고, iPad에서도 아래 이미지와 같이 전체 화면으로 표시할 수 있었습니다. 그러나...

보시다시피 왼쪽 상단에 크고 전체 화면을 끄는 버튼이 훨씬 커집니다. 이것을 지우는 방법을 모르겠습니다. 어쩌면 애플의 생각으로는 임의로 전체 화면을 해제할 수 없는 UI는 인정되지 않기 때문에 강제적으로 해제 버튼이 붙을 것이라고 생각합니다.

또한 페이지를 조금이라도 스크롤하거나 스와이프하려는 경우 전체 화면이 즉시 해제됩니다.

즉, 전체 화면 상태는 어디까지나 동영상 등을 전면에 보이는 수단일 뿐, 의사 앱으로 HTML 콘텐츠를 표시하기 위한 수단으로는 제공하지 않는 것 같습니다.

혹시 그 근처를 설정하는 옵션이 있을지도 모르지만 ··

Android/Chrome라면 FullScreen API에서 풀 스크린화, 상태 취득, 해제 등 JS로 할 수 있었는데, iPad라면 네이티브 앱화할 수밖에 없을 것 같습니다.

계속 조사 중입니다.