IOS 웹뷰 키보드 화면 밀기 - iOS webbyu kibodeu hwamyeon milgi

공통

웹뷰를 구성하기에 앞서 먼저 설정해주면 좋은 팁

1. IOS, AOS, IOS_Web, AOS_Web인지 판단하는 함수를 만들어서 분기처리 할 수 있도록 하자

2. Native 키보드가 활성화 되었는지 않되었는지를 확인 할수 있는 함수를 뚫어놓으면 좋다. (웹이 인식을 못해서 Native의 도움을 받아 UI처리가 쉽다)

3. 새창을 띄울때, 새로고침할 때, 다른 페이지로의 이동할 때, 뒤로가기 할 때 등 페이지 이동에 관해서는 미리 함수를 뚫어 Native의 도움을 받자.

4. AOS 앱 하단 뒤로가기 버튼을 Override하고 싶을 때는 다음과 같이 히스토리를 이용하자

// 1. 히스토리에 먼저 쌓는다.
  history.pushState(null, '', location.href);

// 2. 뒤로가기 버튼 클릭시 레이어를 닫아주는 로직, 레이어가 없으면 뒤로가기
  $(window).bind("popstate", function(e) {
    if(isShowLayer()) {
      hideLayer();
    }

    commonGoBackWindow(device);  
  });

ios

1. input 이전에 입력한 한글이 자동 완성 이슈

• ios에서 특정 버전 이후부터 input에 한글을 입력완료한 후에 다음 입력을 입력할 때, 이전에 입력한 내용이 자동완성되어 입력된다. 이를 막기 위해서는 input focus를 다른 곳에 갔다가 다시 돌아와서 해결해야 하는데 나같은 경우에는 width, height가 0인 input을 만들어서 거기에 focus를 잠깐 갔다가 오는 방식으로 해결하였다.

2. input type="range"에서 touch move해서 움직이는 경우에는 제대로 값이 변경 되지만 click이나 touch를 할 때는 input 값이 변경 되지 않는 이슈

해결) stackoverflow 참고하여 ios polifill을 추가하였다.

// ios웹뷰에서 input type="range"에서 클릭 안되는 이슈 해결 (iosPollyfill)
var diagramSlider = document.querySelector(".play-range");

function iosPolyfill(e) {
        var val = (e.pageX - diagramSlider.getBoundingClientRect().left) /
        (diagramSlider.getBoundingClientRect().right - diagramSlider.getBoundingClientRect().left),
        max = diagramSlider.getAttribute("max"),
        segment = 1 / (max - 1),
        segmentArr = [];

        max++;

        for (var i = 0; i < max; i++) {
          segmentArr.push(segment * i);
        }

        var segCopy = segmentArr.slice(),
        ind = segmentArr.sort((a, b) => Math.abs(val - a) - Math.abs(val - b))[0];

        diagramSlider.value = segCopy.indexOf(ind) + 1;
        video.currentTime(prevStartTime + (prevEndTime - prevStartTime) * (diagramSlider.value / 100));

  		// 추가로 넣을 로직
      }

      if (!!navigator.platform.match(/iPhone|iPod|iPad/)) {
        diagramSlider.addEventListener("touchend", iosPolyfill, {passive: true});
      }
}

3. ios에서는 wifi인지 lte인지는 native를 통해서 전달받아야 한다.

해결) ios개발자 분께 wifi인지 lte인지를 확인할 수 있는 함수하나를 뚫어달라고 했다.
ex) window.location="jscall:isWifi"; 호출

4. ios 터치에 대한 CSS 초기화

* {
  -webkit-touch-callout: none; // 이미지 길게 터치 방지
  -webkit-tap-highlight-color: transparent; // a 클릭시 배경색 제거
   /* 텍스트나 이미지를 선택 못하게 함 */
  -webkit-user-select:none;
  user-select: none;
}

5. ios에서 video tag를 autoplay했을 때 전체화면으로 재생되는 이슈

해결) playsinline 속성을 넣어주자
autoplay 하기위한 준비 3가지

• muted (브라우저 정책)
• playsinline (전체화면으로 재생되는 이슈)
• autoplay (자동재생)

<video playsinline autoplay playsinline>
  <source src="url" />
</video>