fix: ios input, textarea 화면 자동 확대

[imdaxsz]

📝 개요

• ios 환경에서 input, textarea를 터치할 때 화면이 자동 확대되는 현상 해결하였습니다.

test.mp4

(+ safari에서 상단 input 클릭 시 확대는 되지 않지만 상단에 빈 공간이 생긴다면
아이폰 설정 - safari - 방문 기록 및 웹 사이트 데이터 지우기를 한 번 해보시기 바랍니다. 저는 이 과정이 필요했습니다.)

textarea 높이 설정

textarea의 경우 높이 설정 다음과 같이 overriding 해주시면 됩니다.

height: calc(원하는 높이 * 1.1429);

export const FormTextarea = styled(Textarea)`
  width: calc(100% - 81px);
  & > textarea {
    height: calc(233px * 1.1429);
    border-radius: 12px;
  }
`;

🚀 변경사항

• 고객센터 input, textarea 수정
• 애니 검색 검색바 input 수정

🔗 관련 이슈

#206

➕ 기타

chrome 헤더 고정은 해결에 시간이 얼마나 걸릴지 알 수가 없어서 일단 고객센터 약관 작업부터 진행하도록 하겠습니다.

[chanwukim]

어떤 원리로 확대가 안되는지 궁금해요 🤔

[imdaxsz]

어떤 원리로 확대가 안되는지 궁금해요 🤔

ios 환경에서 input, textarea 폰트 사이즈가 16px 이상이면 focus시 화면 자동 확대가 되지 않습니다. 그런데 저희에게 16px은 큰 사이즈였기에... 16px로 설정을 하되 scale로 input과 textarea 영역 크기를 줄여서 폰트 사이즈가 14px처럼 보이도록 했습니다. 이때 폰트 사이즈뿐만 아니라 input과 textarea에 적용된 다른 스타일 속성들도 함께 줄어들기 때문에 줄어드는 비율을 고려해서 처음부터 살짝 더 크게 스타일을 설정하는 과정이 필요했습니다!

[chanwukim]

어떤 원리로 확대가 안되는지 궁금해요 🤔

ios 환경에서 input, textarea 폰트 사이즈가 16px 이상이면 focus시 화면 자동 확대가 되지 않습니다. 그런데 저희에게 16px은 큰 사이즈였기에... 16px로 설정을 하되 scale로 input과 textarea 영역 크기를 줄여서 폰트 사이즈가 14px처럼 보이도록 했습니다. 이때 폰트 사이즈뿐만 아니라 input과 textarea에 적용된 다른 스타일 속성들도 함께 줄어들기 때문에 줄어드는 비율을 고려해서 처음부터 살짝 더 크게 스타일을 설정하는 과정이 필요했습니다!

16px 또는 1rem..?보다 작으면 ios는 확대하는거였군요.. 고생하셨습니다!