웹뷰앱에 들어갈 웹 개발 시 이슈해결 기록(1)

1. 모바일 가상 키보드가 input창에 입력을 마치고 enter누를시 키보드가 내려오게 할 필요가 있었다

- script코드로 keypress이벤트가 발생했을 시 해당 이벤트의  keyCode가 13(엔터)라면 해당 input창을 blur시키면 키보드가 내려온다

 

2. iOS에서 slick슬라이드 사용 시 safari브라우저에서 요소 클릭 시 파란 border가 잡히는 문제가 발생했고

아래와 같이 해결했다

.slick-slide {
    outline: none
}

3. history.back()으로 뒤로가기 시 데이터 처리를 위해 새로고침할 필요가 있었다

아래와 같이 해결했다

// 뒤로가기 후 새로고침
location.href = document.referrer;

4. input창이 모바일 자동완성기능 이용 시 파란색이나 노란색으로 변하는 이슈가 발생했다

css에 속성을 줘서 처리했다

/* 모바일 자동완성시 input배경 변경되는거 막기 */
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px #FFFFFF inset ; -webkit-text-fill-color: #000000; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; }

5. 웹폰트 사용시 css에 font-weight가 적용되지 않는 경우가 있는데

이럴 땐 적용한 폰트가 가변폰트가 아닐 경우 발생하는 이슈여서 적용한 폰트의 가변폰트버전이 있다면 적용해주면 해결