HomeScreen 웹 응용 프로그램의 iOS 8 상태 표시 줄 오버레이 + 바닥 글 '바'

Question

웹 응용 프로그램을 '집'에 설치 한 후 작업하면 iOS의 최신 업데이트로 인해 일반적인 검은 색 상태 표시 줄이 투명하고 그 아래의 웹 콘텐츠 위에 떠있게됩니다.

또한, 사진하지, 20 픽셀의 약 내 고정 된 바닥 글을 밀어 응용 프로그램의 바닥 글에 수평 막대입니다.

저는 항상 iPad를 통해이 응용 프로그램을 제공 할 것으로 기대하지 않습니다. (대부분의 클라이언트는 저렴한 Android 옵션을 선택할 것입니다.) 그러나 내 동료가 자신의 iPads로 응용 프로그램을 시연하는 것은 매우 일반적입니다 ...

여기에 어떤 옵션이 있습니까? 이 장치/버전에 대해 '스니핑'을하고 응용 프로그램을 아래로 이동해야합니까? 그렇다면 더 많은 라이브러리를 도입하지 않고이를 수행하는 가장 좋은 방법은 무엇입니까? 현재 Angular 프레임 워크 + .NET 4.5.1을 사용하고 있습니다.

감사합니다.

Answer 1

글쎄,이 질문에 분명히 많은 관심이 있었기 때문에 나는 그 문제에 대한 해답을 발견했다. 응용 프로그램의 루트에서

나는 현대 아이폰 OS 8 내가 조건부 내가 말대꾸를 그 다음 블록

<div ng-if="isIOS" class="isIOS">&nbsp;</div> 

을 배치 탐색 요소하기 전에 기본 래퍼에서

var userAgent = navigator.userAgent; 
$rootScope.isIOS = (userAgent.match(/(iPad|iPhone|iPod)/g) && userAgent.match(/(OS 8_0_)/g) ? true : false); 

에 대한 테스트를 생성 클래스

.isIOS { 
    position: fixed; 
    z-index: 10000; 
    top:0; 
    width: 100%; 
    height: 23px; 
    background: $fooColor; 

    & + div { 
     margin-top: 25px; 
    } 
} 

및 TOP는 처리됩니다 ... 상태 표시 줄에는 바가 있습니다. ckground는 고정되어 있으며 페이지를 스크롤하는 것이 좋습니다.

바닥에서 나는 공간이 약간 다르므로 기본 레이아웃에 다음 메타 데이터가 필요합니다.

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

어쨌든 ... 모두 좋다. 여기에 와서 이걸 발견하면 도움이 될 것입니다. 만약 당신이 여기에 오지 않았다면, 정말로 모든 것이 중요하지는 않습니다.