[javascript] mobile에서 input클릭시 zoom in 끄기

귀찮다면 바로 결론으로 고고!

테스트

mobile에서 input을 클릭하면 zoom-in이 됩니다.
사용자가 텍스트를 편하게 보게하기 위한 기본설정이라고 합니다.
이것을 끄기 위해서 preventDefault를 해보았습니다.

export const SearchBar: React.FC = () => {
  const onClickInput: MouseEventHandler<HTMLInputElement> = (e) => {
    e.preventDefault();
  };

  return (
      <input
        onClick={onClickInput}
        type='text'
        placeholder='원하는 단어로 검색하세요.'
      />
    )
}

결과는 여전히 zoom-in이 됩니다.
조금 찾아보니, font-size를 고정하면 된다고 합니다.
다만 zoom-in이 되지 않는 최소한의 사이즈 (사용자가 글씨를 보는데 불편함이 없는 최소사이즈)인 16px로 설정하면 된다고 합니다.

export const SearchBar: React.FC = () => {
  const onClickInput: MouseEventHandler<HTMLInputElement> = (e) => {
    e.preventDefault();
  };

  return (
      <input
        onClick={onClickInput}
        type='text'
        placeholder='원하는 단어로 검색하세요.'
        style={{ fontSize: 16 }}
      />
    )
}

테스트 해보니 zoom-in이 되지 않네요

결론

input font-size를 최소 16px로 fix하면 됩니다.

Ref

https://ui-tricks.tistory.com/57