Ios safari input focus zoom-in 현상 막기

 

 

 

안녕하세요. 제니입니다!

사실 해당 기록은, 미리부터 참고했어야 하는데 제가 어느정도 간과한 게 있었던 것 같아요.

Ios는 늘 번거로운 css 수정기가 있는데 그 중 가장 귀찮은게 zoom-in 현상이었는데요..!

이번에 맡은 프로젝트는 프론트 1인이었기도 하고

나름 선배가 돼서 책임감도 있어가지구 조금은 더 세밀하게 보고 있었,,답니다..! 

 

 

 

그러다 safari 테스트를 하는데, 로그인 페이지 input이 zoom-in이 되어서 굉장히 별로더라구요.

역시 이 걸 체크해야지 하는게 좀 있었고

다른 개발자들은 어떻게 하나 찾아보면서 여러가지 잘 정리된 개발자들의 글을 볼 수 있었는데

 

 

 

https://devsoyoung.github.io/posts/ios-input-focus-zoom/

iOS <input> focus 시 자동 zoom-in 막기

 

 

 

저는 이 분의 블로그를 참고해봤구요!

다른 글들도 거의 내용이 동일해서 이렇게 진행을 많이 하시더라구요.

제가 게시글을 도움이 되었던 정리 탭으로 작성을 하지 않은 이유는

아직까지 더 좋은 방법이 있지 않을까 하는 고민 때문인데,,

 

 

 

일단 많은 개발자들이 사용하고 있는 방법은,

 

 

 

1. 메타태그 지정

2. font-size 16px 고정

3. scale 조정

 

 

 

3가지더라구요!

저는 가장 무난하게 디자이너와 소통 가능한 영역에서 input의 기본 size를 16px로 통일하는 방식으로 지정했는데요.

그렇게 하게 되면 Ios safari의 input zoom-in 현상을 수정할 수 있습니다.

 

 

 

참고하던 글에서 좋았던 내용은

좋은 사이트는 예쁜 디자인보다 사용하기 편한 것이 더 중요하다는 것을 깨달았다는 내용이었는데,

저도 늘 동의하는 내용이라서 인상 깊었던 것 같아요.

 

 

 

Input의 font-size를 지정하는것이 때론 디자인을 해치는 게 될 수도 있는데,

기본 Input의 사이즈가 넉넉한 상태라면 zoom-in을 막는 가장 쉬운 방법이 될 수도 있을 것 같습니다.

그렇지 못한 Input이 발생할 경우 추후 또 다른 방법을 고민해서 기록을 남겨볼게요!

Ios css 늘 고민하기!