[아이폰X 대응] 네이티브 화면에서 웹뷰로 돌아갈 때의 행동 대책을 정리했다.

어떻게 썼어요?

위 이미지와 마찬가지로 기본적으로 웹뷰의 메인 앱으로 강제로 가로로 표시된 네이티브 화면을 중간에 켜야 하고, 그 다음에 전진할 때 아이폰X라면 지면이 붕괴하는 현상이 너무 번거로워 기록해야 한다고 생각했다.

왜 대책이 필요한가

https://qiita.com/keeey/items/c175bd8ef12ee65ac3fc
↑ 글에는 아이폰X(iOS11~)의 오목한 부분과 홈인디케이터(블랙바 같은) 부분의 폭이 일치하도록 CSS에 지정padding-top:content(safe-area-inset-top)해야 한다는 내용도 있다.
물론 이 값은 터미널의 방향에 따라 결정되며 터미널이 세로top값이면 입력하고 가로화면top값이면 입력하지 않는다0.
그렇다면 가로화면이 표시된 상태에서 세로화면을 전제로 한 상기padding-top:content(safe-area-inset-top)를 읽으면 어떨까.
답은 0입니다. 그래서 HTML 위에 있는 부분을 아이폰X의 홈에 끼우면 너무 예쁜 오류입니다^^
그나저나 마이그레이션 후 웹뷰 측에서 다음 화면으로 업데이트된 상황에서 다행히 대책이 없었다.
(원인은 불분명하지만 다음 화면으로 업데이트되는 시점에서 세로 디스플레이와 단말기로 판단합니까?)
터미널의 종류, 방향에 따라 각 값은 다음과 같은 설명이 있으니 참고하세요.
https://qiita.com/usagimaru/items/761e9a5f3d78b1939df8

전제 조건

Native->WebView의 정시 실행 웹 측 JS

전환된 시간에 이 페이지 자체를 업데이트할 수 없는 제한이 있음

대책

그래서 나는 이 잘못된 대책을 고려해 실행해 보았다.같은 현상이 일어나는 사람들에게 참고가 됐으면 좋겠어요.
요점은 어느 시기(WebView, Native)가 어느 시기(갱신 전, 갱신 후)에 처리에 맡겨질지이다.

1. 돌아가기 전에 Native로 화면을 강제로 회전하고 돌아오며 값을 업데이트합니다

간단하게 돌아가기 전에 화면의 방향을 세로로 변경한 뒤 웹뷰에 넘기는 방법이다.
Native 화면의 방향 변경과 관련해서는 iOS 6에서 iOS 8로 변경하는 방법이 어려울 것 같습니다.
다음 URL을 참조하여 구현해 보았습니다.
https://qiita.com/nomadmonad/items/e09639e0b31812e28d6d

결실

아마 시간이 걸려야 할 것 같은데 네이티브 지식이 없어 바로 진행할 수 없고 재논의할 수밖에 없다.학습 비용이 높기 때문에 무엇을 하는지 이해하지 못하면 더 많은 착오가 생길 수 있기 때문에 더 간단한 방법이 있는지 다시 토론해 봅시다.

2. 돌아올 때 Native로 WebView 화면 업데이트

location.reload();

원래 나는 왜 전진하는 시간대에 화면이 세로로 업데이트되지 않는지 의문이 있었지만 네이티브 처리가 끝난 시간대에 나는 웹뷰 측을 업데이트하여 CSS가 정상적으로 읽을 수 있는지 확인했다.

결실

이번 프로그램의 규격으로 화면을 다시 읽는 것을 허용하지 않기 때문에 이 방법을 포기했습니다.
어쩔 수 없지...

3. 돌아올 때 WebView 측에서 CSS 업데이트

$('hoge').css('padding-top','44px');

※ 제이큐리를 사용할 수 있는 PJ는 정말 좋아요..
이 또한 WebView에 의해 처리됩니다.네이티브 측에서 웹뷰의 JS를 실행하고 특정한 CSS 등급에 padding 이런 방법을 더한다.그럼 돌아갈 때 CSS로 해결할 수 있어.

결실

하지만 아이폰X 이외의 단말기도 마찬가지로 공간이 비어 있어 포기했다.물론 네이티브 측에서 터미널을 판정하고 웹뷰 측에 T/F 값을 함께 보내면 되지만, 원래 JS 부분의 구조를 변경해야 하기 때문에 이번에 포기한 것이다.

4. 돌아올 때 WebView 측면에서 화면 업데이트

[webView reload];

사이트 축소판 그림
http://niwatako.info/20120913/article1119.html

결실

reload WebView를 통해 세로 화면의 값(safe-area-inset)을 얻을 수 있습니다.
조금 느리지만 어쨌든 UI를 손상시키지 않고 다시 표시할 수 있습니다.

총결산

결과적으로 4개의 Native 측 코드로 WebView 측이 업데이트됩니다.계획 1의 네이티브 측 회전 처리로 해결이 가장 좋을지 모르지만, 화면이 해결돼도 의외의 움직임이 될 수 있기 때문에 이번에는 온당한 해법을 택했다.네이티브에 대한 나름대로의 계획이 있는 사람은 반드시 하나의 계획으로 해결하기를 바란다.

참조 정보

http://blog-e.uosoft.net/entry/20090515/1242315011
http://niwatako.info/20120913/article1119.html
https://qiita.com/nomadmonad/items/e09639e0b31812e28d6d
https://qiita.com/keeey/items/c175bd8ef12ee65ac3fc