아이폰에서 입력창 누를 때 화면 '자동 확대'되는 현상 막는 법
모바일 쇼핑몰이나 홈페이지에서 검색을 하거나 회원가입을 하려고 입력창을 터치했는데, 갑자기 화면이 훅! 하고 줌인(Zoom-in) 되어서 당황하신 적 있으신가요?
입력이 끝나고 나면 사용자가 두 손가락으로 화면을 일일이 꼬집어서 다시 축소시켜야 하는 이 끔찍한 현상은, 고객이 사이트를 이탈하게 만드는 최악의 장애물입니다.
💡 갤럭시에서는 안 그러는데, 왜 아이폰만 그럴까요?
이는 애플(Apple) iOS 사파리의 자체적인 접근성 정책 때문입니다. 입력창(input)의 글자 크기가 '16px'보다 작으면, 사파리는 "사용자가 글씨를 읽기 힘들겠구나"라고 임의로 판단하여 화면을 강제로 16px 크기에 맞춰 돋보기처럼 확대해 버립니다.
1. 가장 깔끔한 해결책: '마의 16px' 규칙 지키기
과거에는 HTML 메타 태그로 user-scalable=no를 넣어 사용자의 화면 확대 기능 자체를 막아버렸지만, 이는 시력이 안 좋은 분들의 불편을 초래하여 현재는 금지된 방식입니다.
가장 우아한 해결책은 모바일 환경에서 모든 입력 폼(input, select, textarea)의 폰트 사이즈를 무조건 16px 이상으로 설정하는 것입니다.
/* 모바일 폼 자동 확대 방지 기본 CSS */
input, textarea, select {
/* 아이폰 사파리의 자동 확대를 막는 마지노선 크기 */
font-size: 16px !important;
}
2. "디자인 때문에 글자를 꼭 작게 해야 하는데요?"
디자인 시안상 입력창 글씨를 14px이나 13px로 작게 유지해야만 할 때가 있습니다. 이때는 실제 폰트 사이즈는 16px로 속이되, CSS의 transform 기능으로 요소 전체의 비율을 줄이는 마법(Trick)을 사용합니다.
/* 폰트는 16px로 사파리를 통과하고, 실제 크기는 작게 보이게 하는 마법 */
.small-input {
font-size: 16px; /* 사파리 검사용 (확대 방지) */
/* 14px 처럼 보이게 하고 싶다면 (14 / 16 = 0.875) */
transform: scale(0.875);
transform-origin: left top; /* 축소되는 기준점 맞추기 */
/* 줄어든 비율만큼 너비(width)를 보정해줍니다 */
width: 114.28%;
}
기기별 생태계(OS)를 완벽히 이해해야 진짜 하이엔드입니다.
나눔웹은 안드로이드와 iOS 등 다양한 기기별 특성과 렌더링 엔진을 깊이 있게 연구하여,
어떤 환경에서도 고객의 결제와 문의 동선이 끊기지 않도록 방어합니다.