iPhone / iPod touch 용 Safari iOS 7에서 탐색 막대를 숨길 수 없음

javascript / css / html을 사용하여 프로그래밍 방식으로 막대를 숨기는 해결책이 없다고 생각하지만 문제를 설명해 보겠습니다. 우리는 모바일 게임 개발자 팀이며 1 년 동안 게임을 개발해 왔습니다.

iOS 7 발표 후 우리는 내비게이션 바를 숨기는 것이 불가능하다는 문제에 직면했습니다. 사용자가 Safari 브라우저의 상단 또는 하단을 탭하면 내비게이션 바가 다시 나타나고 게임의 모든 컨트롤을 숨 깁니다.

지금까지 찾은 유일한 해결책은 사용자가 다음을 수행하도록하는 것입니다.

1. 장치 회전
2. 페이지 스크롤
3. 홈 화면에 애플리케이션 추가

이러한 대안은 허용되지 않습니다. Apple이이 문제를 알고있는 것처럼 보이지만 계속 무시하고 있습니다. 그들은보고 된 버그를 버그 # 14076889의 중복으로 마감했습니다.

나는 우리가 같은 문제를 경험하는 유일한 팀이 아니라고 믿습니다. 누구든지 해결책을 알고 있습니까?

2014 년 9 월 업데이트 : iOS 8에서 minimal-ui기능 제거 기본 브라우저 동작에 의존하는 것 외에 탐색 막대를 제거 / 숨길 수있는 방법이 다시 없습니다 (스크롤 할 때 막대가 숨겨 지지만 스크롤 요소가 BODY페이지에있는 경우에만 해당 ). 유일한 "해결 방법"은 앱을 홈 화면에 저장하고 적절한 메타 태그를 설정하는 것입니다 (아래 참조).

2014 년 8 월 업데이트 : iOS 8 (베타)은 더 이상minimal-ui . 해결 방법이 없습니다. (그 이유는 사람들이 다른 곳으로 이동하는 것을 막기 위해 그것을 사용한 웹 사이트의 남용 때문일 수 있습니다. 따라서 iOS 8 Safari에는 아직 공개되지 않은 새로운 기능이있을 수 있습니다 minimal-ui.)

iOS 7.1은이 문제를 해결하기 위해 새로운 API를 추가했습니다.

<meta name="viewport" content="minimal-ui">

이 새로운 뷰포트 플래그는 기본적으로 Safari UI를 숨 깁니다 (URL 및 SSL 표시기가있는 작은 제목 표시 줄 만 표시됨). Safari UI에 액세스하려면 사용자가이 제목 표시 줄을 적극적으로 탭해야합니다.

참고 것을 아이폰 OS 7.0.x에, 어떤 API 또는 알려진 해결 방법이 없습니다 이에 대한. 해당 버전에서 Safari의 브라우저 크롬을 영구적으로 숨기려면 사용자가 웹 앱을 홈 화면에 추가하도록하거나 (적절한 메타 태그가 설정된 상태로 <meta name="apple-mobile-web-app-capable" content="yes">) Phonegap과 같은 일종의 기본 앱 래퍼를 사용하여 배포해야합니다. 앱 스토어.

개인적으로 저는 그들이 iOS 6 모바일 사파리의 가로 모드에서 도입 한 "전체 화면"버튼을 제거하지 않았 으면 좋겠습니다. 이는 개발자와 사용자를 만족시키는 훌륭한 솔루션이었습니다.

이 문제를보다 영구적으로 해결할 수있는 완벽한 후보는 Mobile Safari가 HTML5 전체 화면 API (OS X의 Safari에서 지원됨)를 지원하는 것입니다. 아아, 지금은 지원이 없으며 역사적으로 iOS 포인트 릴리스에는 새로운 Safari 기능이 추가되지 않았으므로 iOS 8에 해당하는 것일 수 있습니다.

업데이트 : 릴리스 노트 의이 포럼 게시물 에 따라 현재 iOS7.1 베타에서이를 수정하기위한 메타 속성이 있습니다 .

<meta name="viewport" content="minimal-ui">

테스트를 실행했으며이 기능이 현재 베타 2에 있음을 확인할 수 있습니다.

참고 : 새로운 최소 UI 옵션은 훌륭한 솔루션이지만 HTML 응답의 일부 여야합니다. iOS7.1 beta3에서 JS로 뷰포트 메타 태그를 추가하려고했습니다.

$('head').append('<meta name="viewport" content="width=device-width, user-scalable=0, minimal-ui">');

"minimal-ui"값은 브라우저에서 무시됩니다.

업데이트 : 이제 iOS7.1이 출시되어 NDA가 해제되었습니다.

<meta name="viewport" content="minimal-ui">

실제로 올바른 태그이며 라이브 릴리스에서 작동합니다. 필요한 경우 "뷰포트"는 쉼표로 구분 된 목록을 지원할 수 있습니다.

다른 모바일 변수와 결합하여 웹 사이트가 앱처럼 느껴지도록합니다.

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui">

-

우리도 이것으로 어려움을 겪고 있습니다. 우리 사이트에는 TabBar가 있으며 탭을 클릭하려고 할 때마다 Safari 컨트롤 팝업이 표시됩니다.

오늘 희망. Apple 개발자 프로그램의 회원이라면 다음 포럼을 방문하는 것이 좋습니다. https://devforums.apple.com/message/927476

W

편집 2 :

iOS 7.1부터 작동하지 않습니다.

편집하다:

일부 게임 에서는 플레이어가 막대를 스크롤 하도록 힌트 한 다음 막대가 다시 튀어 나올 때까지 스크롤을 잠그는 오버레이를 채택 했습니다. 이 경우 position: fixed움직임을 안정시켜 주므로 많은 도움 이 됩니다 (더 잘 설명 할 수는 없습니다. 이 게임은 이러한 접근 방식의 좋은 예입니다.

www.paf.com/mobile/launch/flowers.html (죄송합니다. 링크를 2 개 이상 게시 할 수 없습니다.)

최근에는 탐색 표시 줄을 비활성화하는 해킹을 발견했습니다. 상단 영역. 다음 스타일로 DOM에 임의의 요소를 추가하기 만하면됩니다.

z-index: 100000; /* should be bigger than everything else */
position: fixed;
overflow: scroll;
-webkit-overflow-scrolling: touch;

여기에서 자세한 내용을 읽어보십시오 .

웹 앱을 만드는 경우 홈 화면에서 URL 링크를 만들 수 있습니다. 다음 HTML 메타 태그를 사용하십시오.

<!-- Allows fullscreen mode from the Homescreen -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Sets the color of the text/battery, wireless icons etc -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

이렇게하면 헤더 / 탐색 막대 위에 표시기가 겹쳐집니다. (모든 iPad 화면에 표시되는 표시기입니다.

자세한 내용은 https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html을 참조하십시오.

바라건대 이것은 누군가에게 도움이되기를 바라지 만, 나는 내 뷰포트 width = device-width ..를 설정하고 싶지 않았습니다. 왜냐하면 iphone 4에서 480px이고 모든 장치에서 내 게임이 800px가되기를 원하기 때문입니다.

그리고 설정하지 않으면 minimal-ui가 등록되지 않습니다.

내 작업은 다음과 같습니다.

<meta name="viewport" content="width=device-width, minimal-ui">

그런 다음 페이지가로드되면 뷰포트를 변경합니다.

  $(window).load(function(){
    $('meta[name=viewport]').attr('content','width=800, maximum-scale=1')
  });

나는 그것이 작동한다는 것에 꽤 충격을 받았습니다. 주소 표시 줄과 하단 UI 버튼은 사용자가 화면의 상단 / 하단을 클릭하는 경우에만 나타납니다. 지금 그것을 사랑하십시오.

이 솔루션은 저에게 효과적 이었지만 제 경우에는 웹앱이 사용되는 Ipad를 제어 할 수있는 개인 대중을위한 것이 었습니다.

가능한 모든 메타 태그와 해킹을 사용하려고했지만 실제로 IOS8이 최소 UI 기능을 제거한 후에는 해결하기가 사실상 불가능했습니다.

상자 밖에서 생각하면서 우리 팀은 좋은 해결책에 도달했습니다.

Mercury 브라우저는 전체 화면으로 열리고 페이지가 청구되는 경우에도 주소 표시 줄이 나타나지 않습니다. 오른쪽 하단에있는 작은 아이콘이며 :) 우리 문제에 완벽하게 작동했습니다!

그러나 반복합니다. 일반 대중을위한 웹앱을 개발하는 경우에는 사용하지 마십시오. UX로 인해 사용자가 앱에 액세스하기 위해 다른 브라우저를 다운로드하는 것은 끔찍합니다.

최신 정보

내 개발자 친구가이 솔루션을 생각해 냈습니다.

appcelerator에서 Titanium 내부의 웹보기를 사용하십시오. Apple 스토어에서 인증되지는 않지만 개인 이벤트의 경우 잘 작동합니다!