2017-09-28 7 views
0

반투명 검정색 상태 표시 줄이있는 전체 화면 웹 앱이 있습니다. body 태그의 배경은 # 333입니다.iOS 전체 화면 웹 앱 색상 상태 막대

모달을 강조하기 위해 모든 콘텐츠를 어둡게하고 싶습니다. 다음 속성을 사용하여 오버레이 div를 사용하는 경우 상태 표시 줄의 배경을 덮지 않습니다.

div#overlay { 
    background-color: rgba(0, 0, 0, .5); 
    position: fixed; 
    z-index: 100; 
    width: 100vw; 
    height: 100vh; 
} 

아무도 내가 상태 표시 줄을 어둡게 할 수있는 방법을 알고 있습니까? 참고로

(직접 body 태그의 색상을 변경하지 않고) , 내 웹 응용 프로그램의 메타 태그는 다음과 같습니다

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" /> 
<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> 

PS : {최고 : -20px;} 작동하지 않는 상태 바 ist 여전히 빛.

답변

1

문제는 iPhone X (새 IE6)로 인해 발생하며 "노치"가있는 곡선 스크린은 잘못된 장소에서 "if"사용에 대한 "보다 실용적인"결정을 사용합니다.

설명해주세요 : 현재 대상이 iOS11 + 인 XCode 9+로 작성된 웹 애플리케이션에는 새로운 기능 (일명 버그)이 포함되어 있습니다. 이제는 콘텐츠와 겹치는 안전한 영역을 사용합니다. 곡선/원형 스크린 (스마트 워치 및 유사)으로 표시 될 수있는 웹 응용 프로그램의 W3 표준입니다.

주로 하이브리드 앱 (Cordova, Ionic 등)에서 주로 "영원히"상태 표시 줄을 숨길 필요가있을 때 더주의해야합니다. 주로 "위치 : 고정"을 추가하고 " 뷰포트 맞춤 "속성이 뷰포트 메타 태그에서"표지 "로 설정됩니다. 그렇게하지 않으면 전체 화면 응용 프로그램에서 주로 현재 사이트의 영향을 미치지 만하지 않습니다

<meta name="viewport" content="viewport-fit=cover" /> 

커버 할 수있는 ATTR를 설정, 웹보기는 20 픽셀 간격 (상태 표시 줄의 크기)를 삽입합니다. 잠시 동안, 우리는 애플에게 이것을 디폴트로 추가하라고 요청했지만, 이제는 웹 전체가 단일 장치를 손상시킨다. 스크롤바는 "패딩 - 상단 : 20px"도 추가하지만, 오버플로 된 콘텐츠는 숨기지 않습니다.

은 "해킹"아래에 당신을 도울 수 있습니다

설계 웹 사이트를 아이폰 X https://webkit.org/blog/7929/designing-websites-for-iphone-x/

에 대한 http://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/

아이폰 X에서 Safari에서 화이트 바 제거