iPhone에서 웹 페이지가 자동으로 확대되는 현상 막기
모바일 웹 개발을 하다 보면 사용자가 입력 필드를 터치하거나 화면을 조작할 때 브라우저가 의도치 않게 확대(줌)되는 현상을 겪게 됩니다. 특히 iOS Safari에서는 이런 동작이 자주 발생하는데, 몇 가지 간단한 설정으로 이를 제어할 수 있습니다.
1. viewport 메타 태그로 확대 완전히 차단하기
메타 태그에 "user-scalable=no" 속성을 추가하면 사용자가 임의로 화면을 확대하는 것을 제한할 수 있습니다.
다음과 같은 viewport 메타 태그를 <head> 태그 안에 추가하면 확대 기능 자체를 차단할 수 있습니다. 이 설정은 모바일 브라우저에게 기기 너비와 동일한 배율을 사용하도록 지시하며, 사용자가 전혀 확대하지 못하게 만들어 원치 않는 확대 동작도 함께 비활성화합니다.
<meta name = "viewport" content = "width=device-width, minimum-scale=1.0, maximum-scale = 1.0, user-scalable = no">
다만 일부에서는 이 방법이 접근성 측면에서 사용자 친화적이지 않다고 지적할 수 있습니다. 시력이 좋지 않은 사용자가 화면을 확대할 수 없게 되기 때문입니다. 따라서 서비스 성격에 따라 신중하게 적용하는 것이 좋습니다.
2. 폰트 크기를 16px 이상으로 설정하기
iOS Safari는 input 필드의 폰트 크기가 16px보다 작으면 해당 필드에 포커스될 때 자동으로 확대합니다. 이를 방지하려면 input 필드의 font-size를 16px 이상으로 설정하면 됩니다.
참고로 기기의 종횡비(device-aspect-ratio)를 활용하면 특정 조건을 만족하는 기기에서만 16px 폰트 크기를 적용하도록 선택적으로 스타일을 지정할 수도 있습니다.
3. select 요소의 확대 방지
<select> 요소는 하나 이상의 <option> 요소와 함께 사용되어 웹 폼에 드롭다운 목록을 생성합니다. <select> 요소가 목록 자체를 만들고, 각 <option> 요소는 목록에서 선택 가능한 항목으로 표시됩니다.
이 select 요소 역시 포커스 시 확대되는 것을 막으려면 폰트 크기를 충분히 크게 지정해야 합니다.
select{
font-size: 40px;
}위 예시처럼 select 요소의 폰트 크기를 40px 등으로 크게 설정하면, 사용자가 드롭다운을 열 때 브라우저가 자동으로 확대되는 현상을 예방할 수 있습니다.