English
Dark Mode Light Mode

INPUT 태그에서 자동 확대 비활성화

모바일 웹브라우저에서 입력 필드를 클릭했을 때 화면이 확대되는 현상을 경험해본 적 있나요?

모바일 웹브라우저에서 입력 필드를 클릭했을 때 화면이 확대되는 현상을 경험해본 적 있나요?

1. 자동 확대 활성화

입력필드의 폰트크기가 작아서 발생하는 문제로 주로 iOS의 웹브라우저에서 일어나는 현상입니다.
iOS는 입력필드 폰트크기가 15px 이하일 경우, 자동 확대되도록 프로그래밍 되어있기 때문입니다.

입력필드 선택하면, 자동 확대 된다

2. 자동 확대 비활성화

해결책은 아주 간단합니다. 입력필드 폰트크기를 16px 이상으로 설정하면 됩니다.
CSS를 아래와 같이 설정합니다.

Advertisement

input { font-size: 16px; }
CSS 적용 후, 자동 확대 안된다

더 상세하게 설정하려면, 아래처럼 할 수도 있습니다.

input[type="text"], input[type="search"], textarea { font-size: 16px; }
댓글 달기 댓글 달기

댓글 남기기

chevron_left 이전 포스트

워드프레스 대시보드 CSS가 제대로 로드되지 않았을 때

다음 포스트 chevron_right

서버 시간, Chrony로 정확하게 동기화하는 방법

Advertisement