iPhone X (시뮬레이터)에서 Cordova 앱이 올바르게 표시되지 않음
어제 Xcode 9.0 (9A235)의 iPhone X Simulator에서 Cordova 기반 앱을 테스트했지만 좋지 않았습니다. 먼저 전체 화면 영역을 채우는 대신 앱 콘텐츠 위와 아래에 검은 색 영역이있었습니다. 그리고 앱 콘텐츠와 검은 색 사이에는 두 개의 흰색 막대가 있습니다.
cordova-plugin-wkwebview-engineUIWebView가 아닌 WKWebView를 사용하여 Cordova 렌더링을 추가 하면 흰색 막대가 수정됩니다. cordova-plugin-wkwebview-engineInapp Purchase 호스팅 콘텐츠에서 다운로드 한 이미지를 HTML5 캔버스로로드 할 때 발생하는 성능 및 메모리 누수 문제로 인해 내 앱이 UIWebView에서 WKWebView로 마이그레이션되지 않음 ( file://WKWebView의 보안 제한으로 인해 Webview로 직접 액세스 할 수 없음) 이미지 데이터는 cordova-plugin-file) 를 통해로드해야합니다 .
이 스크린 샷은 <body> 에서 파란색 배경이 설정된 테스트 앱을 보여줍니다 . UIWebView 위와 아래에는 WKWebView가 아닌 흰색 막대가 표시됩니다.
전체 화면 영역을 채우는 기본 앱과 비교할 때 두 Cordova Webview는 모두 검은 색 영역을 나타냅니다.
나는 여기에 흰색 막대에 대한 해결책을 찾았습니다 .
viewport-fit=cover뷰포트 <meta>태그 에 설정하십시오 .
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
UIWebView의 흰색 막대가 사라집니다.
(가 제공하는 검은 부분을 제거하는 솔루션 @dpogue 아래의 코멘트에서)을 사용하는 것입니다 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와 다른 점이 있습니다. "노치"로 인해 상태 표시 줄이 20 픽셀보다 큽니다. 즉, 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);
}
코르도바 플러그인 상태 표시 줄
- iPhone X에서 상태 막대 크기가 변경되어 iPhone X에서 이전 버전의
cordova-plugin-statusbar디스플레이가 잘못 표시됨 - Mike Hartington 은 필요한 변경을 적용하는 이 풀 요청 을 작성 했습니다 .
- This was merged into the
cordova-plugin-statusbar@2.3.0release, so make sure you're using at least this version to apply to safe-area-insets
splashscreen
- The LaunchScreen storyboard constraints changed on iOS 11/iPhone X, meaning the splashscreen appeared to "jump" on launch when using existing versions of the plugin (see here).
- This was captured in bug report CB-13505, fixed PR cordova-ios#354 and released in
cordova-ios@4.5.4, so make sure you're using a recent version of thecordova-iosplatform.
device orientation
- When using UIWebView on iOS 11.0, rotating from portrait > landscape > portrait causes the
safe-area-insetnot to be re-applied, causing the content to be obscured by the notch again (as highlighted by jms in a comment below). - Also happens if app is launched in landscape then rotated to portrait
- This doesn't happen when using WKWebView via
cordova-plugin-wkwebview-engine. - Radar report: http://www.openradar.me/radar?id=5035192880201728
- Update: this appears to have been fixed in iOS 11.1
For reference, this is the original Cordova issue I opened which captures this: https://issues.apache.org/jira/browse/CB-13273
For a manual fix to an existing cordova project
The black bars
Add this to your info.plist file. Fixing the launch image is a separate issue i.e. How to Add iPhoneX Launch Image
<key>UILaunchStoryboardName</key>
<string>CDVLaunchScreen</string>
The white bars
Set viewport-fit=cover in the meta tag
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
There is 3 steps you have to do
for iOs 11 status bar & iPhone X header problems
1. Viewport fit cover
Add viewport-fit=cover to your viewport's meta in <header>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">
Demo: https://jsfiddle.net/gq5pt509 (index.html)
- Add more splash images to your
config.xmlinside<platform name="ios">
Dont skip this step, this required for getting screen fit for iPhone X work
<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 -->
Demo: https://jsfiddle.net/mmy885q4 (config.xml)
- Fix your style on CSS
Use safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, or safe-area-inset-bottom
Example: (Use in your case!)
#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});
}
Bonus: You can add body class like is-android or is-ios on deviceready
var platformId = window.cordova.platformId;
if (platformId) {
document.body.classList.add('is-' + platformId);
}
So you can do something like this on CSS
.is-ios #header {
// Properties
}
In my case where each splash screen was individually designed instead of autogenerated or laid out in a story board format, I had to stick with my Legacy Launch screen configuration and add portrait and landscape images to target iPhoneX 1125×2436 orientations to the config.xml like so:
<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" />
After adding these to config.xml ("viewport-fit=cover" was already set in index.hml) my app built with Ionic Pro fills the entire screen on iPhoneX devices.
Just a note that the constant keyword use for safe-area margins has been updated to env for 11.2 beta+
https://webkit.org/blog/7929/designing-websites-for-iphone-x/
Fix for iPhone X/XS screen rotation issue
On iPhone X/XS, a screen rotation will cause the header bar height to use an incorrect value, because the calculation of safe-area-inset-* was not reflecting the new values in time for UI refresh. This bug exists in UIWebView even in the latest iOS 12. A workaround is inserting a 1px top margin and then quickly reversing it, which will trigger safe-area-inset-* to be re-calculated immediately. A somewhat ugly fix but it works if you have to stay with UIWebView for one reason or another.
window.addEventListener("orientationchange", function() {
var originalMarginTop = document.body.style.marginTop;
document.body.style.marginTop = "1px";
setTimeout(function () {
document.body.style.marginTop = originalMarginTop;
}, 100);
}, false);The purpose of the code is to cause the document.body.style.marginTop to change slightly and then reverse it. It doesn't necessarily have to be "1px". You can pick a value that doesn't cause your UI to flicker but achieves its purpose.
If you install newer versions of ionic globally you can run ionic cordova resources and it will generate all of the splashscreen images for you along with the correct sizes.
Please note that this article: https://medium.com/the-web-tub/supporting-iphone-x-for-mobile-web-cordova-app-using-onsen-ui-f17a4c272fcd has different sizes than above and cordova plugin page:
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)
I resized images as above and updated ios platform and cordova-plugin-splashscreen to latest and the flash to white screen after a second issue was fixed. However the initial spash image has a white border at bottom now.
'programing tip' 카테고리의 다른 글
| ASP.NET MVC3 Razor에서 읽기 전용 텍스트 상자를 만드는 방법 (0) | 2020.08.03 |
|---|---|
| Tomcat으로 Spring Boot를 시작할 때 사용자 이름과 비밀번호는 무엇입니까? (0) | 2020.08.03 |
| 배열에서 값 찾기 (0) | 2020.08.03 |
| 로드 콜백 후 jQuery UI 대화 상자 제목 변경 (0) | 2020.08.03 |
| Vagrant Cache에서 vms 목록 제거 (0) | 2020.08.03 |