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

121

어제 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는 전체 화면 영역을 채우는 기본 앱과 비교할 때 검은 색 영역을 나타냅니다.

ios  cordova  phonegap  iphone-x 
— DaveAlden
소스
wkwebview에 흥미가 있습니다. 내 게임에서는 전체 너비가 아니라 중앙에서 오프셋되었습니다. uiwebview에서는 동일한 크기를 유지했지만 적어도 중앙에 위치합니다.
— agmcleod
난 그냥 CSS를 참조 몇 가지 문제를 해결했다, 그래서 나도이 문제를 가지고 pt.stackoverflow.com/a/263460/55076
— 이고르 트린 다데을
나도이 문제가 있습니다. <meta>아래 나열된 다른 것들이 작동하지 않는 것처럼 내 cordova index.hml 파일에 태그를 추가하는 것뿐입니다. Cordova-ios 4.5.4와 함께 Cordova 7x를 실행하고 있습니다. 다른 작업이 필요합니까?
— rolinger

답변:

245

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

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

— DaveAlden
소스
3
화면을 회전 할 때 문제가 있습니까? 시도했지만 화면 회전 후 모든 것이 깨졌습니다 (safe-area-inset- *는 장치 방향에 따라 값을 업데이트하지 않습니다. 그리고 세로-> 가로-> 세로를 다시 회전하면 초기 값도 깨졌습니다. ). Apple / Safari 브라우저에 문제가있을 수 있습니까?
— Juan Miguel S.
1
제 경우에는 viewport-fit=cover전체 앱을 추가 할 때 빈 흰색 화면 만 표시되고 다른 것은 표시되지 않습니다. iPhone 7 Plus에서 iOS11, Xcode9를 사용하고 있습니다. 비슷한 행동을 경험하는 사람이 있습니까?
— Dimitri
1
@DaveAlden-11.2 베타 + constant에서 env키워드를 위해 떨어 뜨린 것으로 보입니다 . webkit.org/blog/7929/designing-websites-for-iphone-x
— Brent
1
앱에서 본문 CSS 코드를 어디에 넣습니까? 어떤 파일에서? 나를 위해 아무것도 작품, 나는 이온 3. 사용하고 있습니다
— 디미트리
2
회전 문제에 대한 업데이트가 있습니까? iOS 12를 사용 중이며 동일한 문제가 발생합니다. 이 문제가 계속되는 것이 이상하게 보입니다. / cc @jms
— 분
36

기존 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">
— 코더
소스
감사! .plist 변경은 선택한 답변의 변경 사항과 동일한 효과를 갖지만 훨씬 더 빠릅니다.
— 2Fwebd
이러한 각 작업은 CSS 픽셀 높이와 너비에 대해 무엇을합니까? 내 앱에는 상단에 일련의 좁은 div (메뉴 등)가 있습니다. 그리고 나머지 픽셀 높이를 계산하여 마지막 DIV가 화면의 나머지 부분을 채우도록합니다. 지금은 하단의 흰색 막대가 해당 DIV의 일부를 덮는 것을 볼 수 있지만 모든 것을 알 수는 없습니다. DIV가 여전히 화면 하단으로 이동하지 않음을 의미합니다. 그리고 차례로 내 앱은 상단 흰색 막대 아래에서 시작되므로 상단 공간을 사용하려고 시도하지 않습니다.
— rolinger
나는 사용 UILaunchStoryboardName하고 검은 막대를 제거했습니다. 하지만 내 스플래시 화면이 확장됩니다. 이유는 무엇입니까? 수락 된 답변이 작동하지 않습니다
— Huiting
@coder 감사합니다-plist에 UILaunchStoryboardName을 추가하면 앱 스토어에 제출할 수 없습니다. 오류 ITMS-90705 : "Launch storyboard not found. 키 UILaunchStoryboardName에 대한 파일 이름 확장자없이 시작 스토리 보드 파일 이름을 지정했는지 확인하십시오. Info.plist에서. "
— Matt Roberts
@Huiting 사건에 대한 해결책을 찾았습니까?
— LMaker 2019-04-04
16

해야 할 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
}
— l2aelba
소스
5

각 스플래시 화면이 자동 생성되거나 스토리 보드 형식으로 배치되는 대신 개별적으로 디자인 된 경우에는 기존 실행 화면 구성을 고수하고 세로 및 가로 이미지를 추가하여 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 장치의 전체 화면을 채 웁니다.

— 태권 조
소스
선생님하지만 내 Config.xml의 난 이미 라인과 뷰포트 맞는 = 커버 위에 추가 한
— 카필 SONI
@Kapilsoni 그러면 Cordova UIWebView, WKWebView, SplashScreen 플러그인 또는 이러한 구성의 조합에 문제가있을 수 있습니다. 또한 빌드에서 XCode 10 또는 11을 타겟팅하고 있습니까?
— TaeKwonJoe
제가 XCode 10을 목표로하고 있습니까?
— Kapil soni
2

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가 깜박 거리지 않고 목적을 달성하는 값을 선택할 수 있습니다.

— YYL
소스
UIWebView는 iOS8에서 더 이상 사용되지 않았습니다 ... 기존 버그가 수정 될지 의심 스럽습니다. Apple은 앱을 업로드 할 때 이것이 곧 중단 될 것이라고 경고하고 있습니다 ... 따라서 고통을 감수하고 WKWebView로 마이그레이션 할 시간입니다 ...
— Mozfet
2

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);
    }
}
— 그 다르 칸
소스
1

최신 버전의 ionic전역 을 설치 하면 실행할 수 ionic cordova resources있으며 올바른 크기와 함께 모든 스플래시 화면 이미지가 생성됩니다.

— 성운
소스
-1

이 기사 : https://medium.com/the-web-tub/supporting-iphone-x-for-mobile-web-cordova-app-using-onsen-ui-f17a4c272fcd 는 위와 코르도바와 크기가 다릅니다. 플러그인 페이지 :

Default@2x~iphone~anyany.png (= 1334x1334 = 667x667@2x)
Default@2x~iphone~comany.png (= 750x1334 = 375x667@2x)
Default@2x~iphone~comcom.png (= 750x750 = 375x375@2x)
Default@3x~iphone~anyany.png (= 2436x2436 = 812x812@3x)
Default@3x~iphone~anycom.png (= 2436x1242 = 812x414@3x)
Default@3x~iphone~comany.png (= 1242x2436 = 414x812@3x)
Default@2x~ipad~anyany.png (= 2732x2732 = 1366x1366@2x)
Default@2x~ipad~comany.png (= 1278x2732 = 639x1366@2x)

위와 같이 이미지 크기를 조정하고 ios플랫폼 cordova-plugin-splashscreen을 최신 버전으로 업데이트 하고 두 번째 문제가 수정 된 후 플래시가 흰색 화면으로 바뀌 었습니다. 그러나 초기 스팸 이미지에는 이제 하단에 흰색 테두리가 있습니다.

— msmfsd
소스
1
내가 가진 시뮬레이터 출시에 아이폰 X를 확인할 수 있습니다 Default@3x~iphone~comany.png - 1242x2436이미지
— msmfsd
참고로 iPhone X의 적절한 크기는 다음과 같습니다. 세로 : 1125px × 2436px ... 가로 : 2436px × 1125px
— Sterling Bourne
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.