iOS 에서 인풋 클릭할때 줌인되는 현상.

스택오버플로에서 장시간 검색했다. 

논의된 내용은 자그마치 8년간 의견이 왔다갔다 한걸 확인했다. 

 

제목처럼 iOS safari 에서 인풋을 클릭할 때에 줌인 되는 현상에 대해서 글을 적고자 한다. 

먼저 이것이 발생하는 현상에 대해서 정확히 알아야 할 필요가 있다 .

 

이 현상은 iOS에서만 발생하는 문제이며, 유저의 접근성 개선을 위한, iOS의 대책이라고 할수 있다 .

해당 인풋요소의 font-size가 16px 미만 일 경우, 자동으로 줌인 되게 되어있다 .

이는 사용자의 가독성을 위해 적용된 것으로, 이것을 시스템적으로 방지 할 방법은 없다. 

제일 좋은 것은 모바일에서 font-size 16이상을 사용하는 것이다. 

모바일에서 코딱지만한 글씨로 봐서는 뭐 아무것도 안보이는데, 

요즘 트렌드 또한 크게크게 디자인 하는 추세이니, 이것에 맞추어서 잘 작업한다면 크게 문제가 없지 않을까 싶다. 

자 그럼 해결 방법이 전혀 없느냐? 그것은 또 아니다. 

분명히 시스템적으로는 해결 방법이 없지만,

css로 처리 가능한 부분이 있다. 약간 수학적인 내용이다. 비례식을 이용하자. 

14 : 16 = 100 : X

14폰트를 16으로 키울때 100은 얼마의 값이 되느냐. 

16 X 100 / 14 = X, 이런식으로 나머지 값들도 계산할 수 있다.

예를들면, 

input {width:100%; height:50px; font-size:14px; line-height:1.5; padding:10px;}

이런 스타일을 가진 인풋이 있다고 가정할 때에, 

input 전체를 16픽셀에 맞추어 키워놓은 다음 transform으로 줄이는 방식을 택해야 한다. 

위의 것을 적용 해본다면,

input {width:114%; height:57px; font-size:16px; line-height: 1.7; padding:11px; }

이렇게 폰트사이즈에 맞춰서 크기를 키워놓고, 

input {width:114%; height:57px; font-size:16px; line-height: 1.7; padding:11px; transform:scale(0.875);}

위와같이 트랜스폼 스케일을 적용하면 되겠다.

다만 위와같이 적용하고 나서, margin-right: margin-bottom: 을 역마진으로 처리해야 하는 부분이 있으나, 

실무에서 적용하고 테스트 해본 결과, 정확한 수치값이 맞지 않기에, 개발자모드에서 인라인으로 스타일 적용하며,

테스트 해보길 바란다. 

 

셀렉트박스의 경우, 

select:active {font-size:16px}

으로 간단히 처리가 가능하다.