iPhone / iPod touch 용 Safari iOS 7에서 내비게이션 막대를 숨길 수 없음

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과 같은 일종의 기본 앱 래퍼를 사용하여 배포해야합니다. App Store.

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

이 문제를 더 영구적으로 해결할 수있는 완벽한 후보는 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가 있으며 탭을 클릭하려고 할 때마다 사파리 컨트롤 팝업이 나타납니다.

오늘 희망. 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">

This will super-impose the indicators over your header/nav bar. (The indicators you see on all the iPad screens.

For more info, see: https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

---

Hopefully this helps someone, but I didn't want to set my viewport width=device-width.. because its 480px on iphone 4.. and I want my game to be at 800px for all devices.

And if you don't set it, then minimal-ui doesn't register.

My work around is doing:

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

And then changing the viewport once the page is loaded:

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

I'm pretty shocked it works. The address bar and lower UI buttons only appear if the user clicks the top/bottom of the screen. Love it now.

---

This solution worked for me, but in my case, the webapp was for a private public, where I had control of the Ipad that would be used.

I tried to use all possible meta tags and hacks, and really, after IOS8 have removed the minimal-ui feature, was practically impossible to solve.

Thinking outside the box, our team reached a nice solution:

The Mercury browser opens in fullscreen, and even when pages are being charged, the address bar does not appear. It is a small icon on the bottom right and only :) It worked perfectly for our problem!

But I repeat: do not use it if you are developing a webapp for the public in general. It's terrible for the UX force your user to download a different browser to access the app.

UPDATE

A developer friend of mine came up with this solution:

Use a webview inside of Titanium from appcelerator. It won't be aproved on Apple store, but for a private event, it'll work just fine!

참고URL : https://stackoverflow.com/questions/18793072/impossible-to-hide-navigation-bars-in-safari-ios-7-for-iphone-ipod-touch