🍊 낑깡팜_09 : Disable auto zoom in `<input>` on iOS

아이폰으로 낑깡팜 배포 링크에 접속 후 input에 포커스를 주면 자동으로 줌인이 된다?!

• 해당 내용을 찾아보니 사파리에서 발생하는 문제라고 하는데 저는 크롬에서도 동일한 문제가 발생했습니다.
• 갤럭시에서 접속할 때는 줌인 문제가 발생하지 않았습니다.

*TMI : 낑깡팜 프로젝트를 시작할 떄는 갤럭시 유저였습니다.. 껄껄

원인

• form 요소의 폰트 사이즈가 16px 보다 작을 경우 발생하는 문제

해결 방법

1. 폰트 사이즈를 16px 이상으로 조정
2. input의 폰트 사이즈를 16px로 적용한 후 transform: scale() 이용하여 원하는 크기만큼 작게 보이도록 하기
3. Viewport meta 태그를 이용

⇒ 제일 간단한 방법인 3번 선택

Viewport meta 태그 적용하기

• 아래의 코드를 head 태그 내에 삽입
  • 아래의 코드만으로 충분하지만, 저는 minimum-scale=1, viewport-fit=cover도 추가했습니다.

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 />

• 생성해놓은 Custom Document 내에 위의 코드 삽입
  • 이 전에 오픈 그래프 설정 해놓은 meta 태그를 _document에 적용해놓음
  • 따라서, 동일하게 _document에 위의 코드를 작성함
• 하지만 동작하지 않았다고 한다.. 왜..
• _app으로 해당 코드를 이동시키니 정상적으로 동작

Viewport meta 태그가 _document 내에 위치했을 때 동작하지 않은 이유?

개발자 도구에서 확인해보기

• 해당 코드가 _document 내에 위치했을 때, 적용한 코드 아래에 다른 viewport meta 태그가 적용되어 있다.
  
• 해당 코드가 _app 내에 위치했을 때, 내가 적용한 viewport meta 태그만 나타난다.
  

Viewport meta tags should not be used in _document.js's Head

• 공식문서에 따르면 _document 내에 viewport meta 태그가 적용된 경우 중복제거가 불가능하다.
  ⇒ 위의 개발자 도구 스크린샷에서 볼 수 있듯이..!
• 따라서 viewport meta 태그는 _app 내에 작성해야 한다.

참고

• Custom Document
• Viewport meta tags should not be used in _document.js's Head
• Disable Auto Zoom in Input "Text" tag - Safari on iPhone
• iOS input focus 시 자동 zoom-in 막기