[ios] Cordova 앱이 iPhone X (시뮬레이터)에서 올바르게 표시되지 않음

Program / 글쓴이

어제 Xcode 9.0 (9A235)의 iPhone X Simulator에서 Cordova 기반 앱을 테스트했지만 좋지 않았습니다. 첫째, 전체 화면 영역을 채우는 대신 앱 콘텐츠 위와 아래에 검은 색 영역이있었습니다. 더 나쁜 것은 앱 콘텐츠와 검은 색 사이에 두 개의 흰색 막대가 있다는 것입니다.

cordova-plugin-wkwebview-engineWKWebView (UIWebView 아님)를 사용하여 Cordova 렌더링을 추가 하면 흰색 막대가 수정됩니다. 내 앱은 성능 및 메모리 누수 문제로 인해 UIWebView에서 WKWebView로 마이그레이션되지 않습니다. cordova-plugin-wkwebview-engineInapp Purchase 호스팅 콘텐츠에서 HTML5 캔버스로 다운로드 한 이미지를로드 할 때 발생합니다 ( file://WKWebView의 보안 제한으로 인해 Webview에서 직접 액세스 할 수 없습니다. 이미지 데이터는 cordova-plugin-file) 를 통해로드해야합니다 .

이 스크린 샷은 <body> 에 파란색 배경이 설정된 테스트 앱을 보여줍니다 . UIWebView 위와 아래에서 흰색 막대를 볼 수 있지만 WKWebView에서는 볼 수 없습니다.


(출처 : pbrd.co )


(출처 : pbrd.co )

두 Cordova Webview는 전체 화면 영역을 채우는 기본 앱과 비교할 때 검은 색 영역을 나타냅니다.

답변

여기 에서 흰색 막대에 대한 해결책을 찾았습니다 .

viewport-fit=cover뷰포트 <meta>태그 에 설정 합니다. 예 :

<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">

UIWebView의 흰색 막대가 사라집니다.

검은 색 영역을 제거하는 솔루션 ( 아래 주석에서 @dpogue 제공 )은 기본적으로 Cordova에서 사용되는 레거시 시작 이미지를로 대체 하기 위해 LaunchStoryboard 이미지 를 cordova-plugin-splashscreen사용하는 것입니다. 이렇게하려면 다음을 iOS 플랫폼에 추가하십시오 config.xml.

<platform name="ios">
    <splash src="res/screen/ios/Default@2x~iphone~anyany.png" />
    <splash src="res/screen/ios/Default@2x~iphone~comany.png" />
    <splash src="res/screen/ios/Default@2x~iphone~comcom.png" />
    <splash src="res/screen/ios/Default@3x~iphone~anyany.png" />
    <splash src="res/screen/ios/Default@3x~iphone~anycom.png" />
    <splash src="res/screen/ios/Default@3x~iphone~comany.png" />
    <splash src="res/screen/ios/Default@2x~ipad~anyany.png" />
    <splash src="res/screen/ios/Default@2x~ipad~comany.png" />

    <!-- more iOS config... -->
</platform>

그런 다음에서 다음 치수를 사용하여 이미지를 만듭니다 res/screen/ios(기존 항목 제거).

Default@2x~iphone~anyany.png - 1334x1334
Default@2x~iphone~comany.png - 750x1334
Default@2x~iphone~comcom.png - 1334x750
Default@3x~iphone~anyany.png - 2208x2208
Default@3x~iphone~anycom.png - 2208x1242
Default@3x~iphone~comany.png - 1242x2208
Default@2x~ipad~anyany.png - 2732x2732
Default@2x~ipad~comany.png - 1278x2732

검은 색 막대가 제거되면 iPhone X에 대해 해결해야 할 또 다른 점이 있습니다. 상태 표시 줄은 “노치”로 인해 20px보다 큽니다. 이는 Cordova 앱의 맨 위에있는 모든 콘텐츠가 가려진다는 것을 의미합니다. :

패딩을 픽셀 단위로 하드 코딩하는 대신 safe-area-inset-*iOS 11 의 새로운 상수를 사용하여 CSS에서 자동으로 처리 할 수 ​​있습니다 .

참고 : iOS 11.0에서는 이러한 상수를 처리하는 함수가 호출 constant()되었지만 iOS 11.2에서는 Apple이 이름을 env()( 여기 참조 )로 변경 했으므로 두 경우 모두 CSS 규칙을 둘 다로 오버로드하고 CSS 폴백 메커니즘 에 의존 하여 적절한 것 :

body{
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
}

결과는 원하는대로입니다. 앱 콘텐츠가 전체 화면을 덮지 만 “노치”에 의해 가려지지는 않습니다.

위의 단계를 보여주는 Cordova 테스트 프로젝트를 만들었습니다. webview-test.zip

노트:

바닥 글 버튼

  • 앱에 바닥 글 버튼이있는 경우 (내가하는 것처럼) safe-area-inset-bottomiPhone X의 가상 홈 버튼과 겹치지 않도록 적용해야합니다.
  • 제 경우 <body>에는 바닥 글이 절대 위치에 있기 때문에 이것을 적용 할 수 없었기 때문에 바닥 글에 직접 적용해야했습니다.

.toolbar-footer{
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
}

cordova-plugin-statusbar

  • iPhone X에서 상태 표시 줄 크기가 변경되어 iPhone X에서 이전 버전이 cordova-plugin-statusbar잘못 표시됨
  • Mike Hartington 은 필요한 변경 사항을 적용하는 이 pull 요청 을 생성 했습니다 .
  • 이것은 cordova-plugin-statusbar@2.3.0릴리스 에 병합 되었으므로 안전 영역 삽입에 적용하려면이 버전 이상을 사용하고 있는지 확인하십시오.

스플래시 스크린

  • iOS 11 / iPhone X에서 LaunchScreen 스토리 보드 제약 조건이 변경되었습니다. 즉, 기존 플러그인 버전을 사용할 때 시작 화면이 “점프”하는 것처럼 보였습니다 ( 여기 참조 ).
  • 이것은 버그 보고서 CB-13505 , 수정 된 PR cordova-ios # 354 에서 캡처되었으며에서 릴리스 cordova-ios@4.5.4되었으므로 최신 버전의 cordova-ios플랫폼을 사용하고 있는지 확인하십시오 .

장치 방향

  • iOS 11.0에서 UIWebView를 사용하는 경우 세로> 가로> 세로에서 회전하면 safe-area-inset다시 적용되지 않아 콘텐츠가 다시 노치에 의해 가려집니다 ( jms 로 강조 표시됨). 아래 주석에서 ).
  • 앱이 가로 모드로 실행 된 다음 세로로 회전하는 경우에도 발생합니다.
  • .NET을 통해 WKWebView를 사용할 때는 발생하지 않습니다 cordova-plugin-wkwebview-engine.
  • 레이더 보고서 : http://www.openradar.me/radar?id=5035192880201728
  • 업데이트 : iOS 11.1에서 수정 된 것으로 보입니다.

참고로 이것은 내가 열어 본 원래 Cordova 문제로 https://issues.apache.org/jira/browse/CB-13273

답변

기존 Cordova 프로젝트에 대한 수동 수정

검은 색 막대

이것을 info.plist 파일에 추가 하십시오. 시작 이미지 수정은 별도의 문제입니다. 즉 iPhoneX 시작 이미지를 추가하는 방법

<key>UILaunchStoryboardName</key>
<string>CDVLaunchScreen</string>

흰색 막대

메타 태그에서 viewport-fit = cover 설정

<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">

답변

해야 할 3 단계가 있습니다.

iOS 11 상태 표시 줄 및 iPhone X 헤더 문제

1. 뷰포트 맞춤 덮개

viewport-fit=cover뷰포트의 메타에 추가<header>

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">

데모 : https://jsfiddle.net/gq5pt509(index.html )

  1. 더 스플래시 이미지를 추가 하여에 config.xml내부<platform name="ios">

이 단계를 건너 청춘 이 점점 필요한 화면 맞춤을 위한 아이폰 X의 작업

<splash src="your_path/Default@2x~ipad~anyany.png" />   <!-- 2732x2732 -->
<splash src="your_path/Default@2x~ipad~comany.png" />   <!-- 1278x2732 -->
<splash src="your_path/Default@2x~iphone~anyany.png" /> <!-- 1334x1334 -->
<splash src="your_path/Default@2x~iphone~comany.png" /> <!-- 750x1334  -->
<splash src="your_path/Default@2x~iphone~comcom.png" /> <!-- 1334x750  -->
<splash src="your_path/Default@3x~iphone~anyany.png" /> <!-- 2208x2208 -->
<splash src="your_path/Default@3x~iphone~anycom.png" /> <!-- 2208x1242 -->
<splash src="your_path/Default@3x~iphone~comany.png" /> <!-- 1242x2208 -->

데모 : https://jsfiddle.net/mmy885q4(config.xml )

  1. CSS에서 스타일 수정

사용 safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, 또는safe-area-inset-bottom

예 : (당신의 경우에 사용하십시오!)

#header {
   position: fixed;
   top: 1.25rem; // iOs 10 or lower
   top: constant(safe-area-inset-top); // iOs 11
   top: env(safe-area-inset-top); // iOs 11+ (feature)

   // or use calc()
   top: calc(constant(safe-area-inset-top) + 1rem);
   top: env(constant(safe-area-inset-top) + 1rem);

   // or SCSS calc()
   $nav-height: 1.25rem;
   top: calc(constant(safe-area-inset-top) + #{$nav-height});
   top: calc(env(safe-area-inset-top) + #{$nav-height});
}

보너스 : 당신은 같은 몸 클래스를 추가 할 수 있습니다 is-android또는 is-ios에 deviceready

var platformId = window.cordova.platformId;
if (platformId) {
   document.body.classList.add('is-' + platformId);
}

따라서 CSS에서 이와 같이 할 수 있습니다.

.is-ios #header {
 // Properties
}

답변

각 스플래시 화면이 자동 생성되거나 스토리 보드 형식으로 배치되는 대신 개별적으로 디자인 된 경우에는 기존 실행 화면 구성을 고수하고 세로 및 가로 이미지를 추가하여 iPhoneX 1125 × 2436 방향을 config.xml에 추가해야했습니다. 이렇게 :

<splash height="2436" src="resources/ios/splash/Default-2436h.png" width="1125" />
<splash height="1125" src="resources/ios/splash/Default-Landscape-2436h.png" width="2436" />

이를 config.xml에 추가하면 ( “viewport-fit = cover”는 이미 index.hml에 설정되어 있음) Ionic Pro로 빌드 된 내 앱이 iPhoneX 장치의 전체 화면을 채 웁니다.

답변

것을 그냥 참고 constant안전 영역 마진 키워드 사용이 업데이트되었습니다 env11.2 베타 +에 대한

https://webkit.org/blog/7929/designing-websites-for-iphone-x/

답변

iPhone X / XS 화면 회전 문제 수정

iPhone X / XS에서는 safe-area-inset- * 계산이 UI 새로 고침 시간에 새 값을 반영하지 않았기 때문에 화면 회전으로 인해 헤더 막대 높이가 잘못된 값을 사용하게됩니다. 이 버그는 최신 iOS 12에서도 UIWebView에 존재합니다. 해결 방법은 1px 상단 여백을 삽입 한 다음이를 빠르게 되 돌리는 것입니다. 그러면 safe-area-inset- *가 즉시 다시 계산됩니다. 다소 추한 수정이지만 어떤 이유로 UIWebView를 유지해야하는 경우 작동합니다.

window.addEventListener("orientationchange", function() {
    var originalMarginTop = document.body.style.marginTop;
    document.body.style.marginTop = "1px";
    setTimeout(function () {
        document.body.style.marginTop = originalMarginTop;
    }, 100);
}, false);

스 니펫 확장

코드의 목적은 document.body.style.marginTop을 약간 변경 한 다음 뒤집는 것입니다. 반드시 “1px”일 필요는 없습니다. UI가 깜박 거리지 않고 목적을 달성하는 값을 선택할 수 있습니다.

답변

2 년 동안 코르도바 앱을 개발 중이며 관련 문제를 해결하는 데 몇 주를 보냈습니다 (예 : 키보드가 열렸을 때 웹보기 스크롤). iOS와 Android 모두에 대해 테스트되고 입증 된 솔루션입니다.

PS : 콘텐츠 스크롤을 위해 iScroll을 사용하고 있습니다.

  1. index.html의 메타 태그에서 viewport-fit = cover 를 사용하지 말고 앱을 상태 표시 줄에 두지 마십시오 . iOS는 모든 iPhone 변형에 대해 적절한 영역을 처리합니다.
  2. XCode에서 상태 표시 줄 숨기기를 선택 취소 하고 전체 화면이 필요하며 Launch Screen File을 선택하는 것을 잊지 마십시오. CDVLaunchScreen 마십시오
  3. config.xml에서 전체 화면 을 false 로 설정하십시오.
  4. 마지막으로 (훌륭한 플러그인에 대해 Eddy Verbruggen에게 감사드립니다) 그의 플러그인 cordova-plugin-webviewcolor 를 추가하여 상태 표시 줄과 하단 영역 배경색을 설정합니다. 이 플러그인을 사용하면 원하는 색상을 설정할 수 있습니다.

  5. config.xml에 아래 추가 (x 뒤의 첫 번째 ff는 불투명)

    <preference name="BackgroundColor" value="0xff088c90" />

  6. 입력 요소에 포커스 이벤트를 추가하여 스크롤 위치를 직접 처리하세요.

    iscrollObj.scrollToElement(elm, transitionduration ... etc)

안드로이드를 들어, 동일한 작업을 수행하지만, 대신 코르도바 – 플러그인 – webviewcolor 설치, 코르도바 – 플러그인 – 상태 표시 및 코르도바 – 플러그인 – 내비게이션 바 색을

다음은 이러한 플러그인을 사용하여 iOS와 Android 모두에서 작동하는 자바 스크립트 코드입니다.

function setStatusColor(colorCode) {
    //colorCode is smtg like '#427309';
    if (cordova.platformId == 'android') {
        StatusBar.backgroundColorByHexString(colorCode);
        NavigationBar.backgroundColorByHexString(colorCode);
    } else if (cordova.platformId == 'ios') {
        window.plugins.webviewcolor.change(colorCode);
    }
}