[Mobile Web] 크로스브라우징(Cross Browsing) 이슈

 

 

크로스 브라우징이란?

왜 여기선 되고 저기선 안되지? 왜 크롬에선 되는데 사파리에선 안됨? 안 드는 되는데 왜 아이폰에서 안될까?

 

0. 공통사항

1) User-Agent에서 app/web 환경 및 브라우저 정보 조회 가능하다.

 

1. 사파리

1) window.open 등 팝업 호출 시 사용자 action 내에서만 호출되고, callback이나 SubMethod에서는 호출되지 않는다.

  * action 외부에서 호출 시 설정에 따라 팝업 차단 해제할 건지 묻던지 아무 반응 없다.

 

// 사용자 action
function onClick(){
   window.open(url); // 가능
   fuc_open(url);
}

// Sub Method
function fuc_open(url){
   window.open(url); // 무응답
}

 

* 호출만의 문제가 아니라 validation check가 callback이나 SubMethod에 있을 경우 사파리는 별도로 close 필요하다.

 

 

2. 크롬

1) input의 id를 cardNo로 설정한 경우 크롬 브라우저에서 자동으로 촬영 카드번호를 가져오도록 지원한다.

  * inputBox focus 시 카메라 버튼이 보이고 버튼을 누르면 촬영 모드 활성화된다.

  * 카드 촬영 시 연속된 cardNo1 ~ cardNo4까지 입력한다.

    - 중간에 hidden input이 있으면 있는 데까지만 입력한다.

    - 마지막 자리는 대부분 보안 키패드를 사용하기 때문에 별도 컨트롤해줘야 한다.

 

 

3. 네이버 앱(웨일 아님)

1) window.open 시 팝업이 별도 새창으로 열리지 않고, 탭으로 열리고 window.close가 안 먹힐 때가 있다.

  * close를 setTimeout 안에 넣었을 때 정상 작동하는 경험을 했다.

  * 모바일 웹을 네이버, 다음앱으로도 흔히들 사용해서 테스트에 꼭 포함시켜야 한다.