iOS 모바일에서 입력창 터치 시 확대가 되는 것을 방지하기 위한 방법입니다. PC 환경에서는 문제가 없으나, 모바일에서 검색창 터치 시 입력창이 확장되는 문제가 있습니다. 입력을 취소할 때 원래 상태로 되돌리면 문제가 없지만 확대한 상태에서 페이지가 좌우로 스크롤되는 문제가 있습니다. iOS 환경에서는 글자 크기가 16px 미만일 때 <input>,<select>요소가 확대되기 때문입니다.
확대 방지하는 방법
input 포커스 시에 확대를 방지하는 두가지 방법이 있습니다.
1. 브라우저 메타 태그로 제어
<meta content="width=device-width, initial-scale=1, user-scalable=1, minimum-scale=1, maximum-scale=5" name="viewport"></meta>
위 메타 태그는 제 블로그의 브라우저 메타 태그입니다. maximum-scale=5 이 부분을 maximum-scale=1로 변경하고 iOS 모바일 환경에서 확인합니다. 더이상 입력창 포커스 시 확대되지 않습니다. 정말 간단하죠?
하지만 이 방법을 사용하는 경우 다음과 같은 문제가 발생합니다.
Google PageSpeed Insights에서 사이트 속도를 확인할 때 접근성 점수 감소에 영향을 줍니다. 권장 사항이니 걱정 안해도 될 것 같지만.. 저는 찝찝해서 이 방법은 사용하지 않기로 했습니다. 남은 방법은.. 폰트를 키우는 것 뿐.😂
2. input 폰트 사이즈 16px로 변경하기
메타 태그는 건드리지 않고 iOS 환경 기준에 맞게 폰트 크기를 크게 했습니다.
input {font-size: 16px;}
이렇게 변경하니 header의 로고와 글자 크기가 같아졌어요!😂
1) 폰트 사이즈 16px로 변경 후 input 크기 줄이기
모바일에서는 적당하지만, PC에서 검색창 글자가 너무 커서 CSS로 input 크기를 줄이는 꼼수를 부려봤습니다.
input {font-size: 16px;transform: scale(0.90);}
저는 폰트 사이즈를 16px로 하고 input 크기를 줄이니 좌우에 배치된 아이콘들도 이동을 시켜줘야 해서 추가되는 CSS 코드가 많아지네요. 그래서 그냥 큰 폰트를 사용하기로 했습니다!🤣
수정해야 할 부분이 많은 건 제 테마 디자인 문제이니 scale을 이용해 입력창 크기를 줄여서 원래 폰트 크기처럼 보여지게 해보세요!