HTML, CSS Mobile 모바일 입력창에 포커스 가는 경우 확대 효과 없애기 - viewport 활용

HTML, CSS Mobile 모바일 입력창에 포커스 가는 경우 확대 효과 없애기

모바일 기기에서 웹페이지를 이용할 때 inputBox 또는 Textarea 입력창을 터치하면 화면이 확대대는 경우가 있습니다.

페이지가 확대대지 않고 그냥 입력해도 되는데 말입니다 -.~

이 확대 되는 효과를 없애고 포커스만 이동해서 화면 그대로 입력창을 이용할 수 있는 방법이 있습니다.

viewport 메타 태그에 user-scalable=no 속성을 추가 해주시면 됩니다.

viewport 메타 태그 속성은 모바일 웹페이지를 이용할 때 필수적인 태그 입니다.

모바일 브라우저들은 viewport로 알려진 가상의 os상에 페이지를 렌더링 합니다.

즉, 화면 Display 상의 표시 영역을 뜻합니다.

모바일(IOS) Safari는 viewport meta 태그를 도입해 웹 개발자들이 viewport 크기와 scale 속성을 정의할 수 있게 했고, 대부분의 모바일 브라우저에서도 이를 지원합니다.

사용방법 입니다.

 name="viewport" content="width=device-width, inital-scale=1.0, user-scalable=no">

1. viewport의 속성

width: viewport의 가로 크기를 조정합니다. 일반적인 숫자값이 들어 갈 수도 있고, device-width와 같은 특정한 값을 사용할 수도 있습니다. device-width는 100% 스케일에서 CSS 픽셀들로 계산된 화면의 폭을 의미합니다.

height : viewport의 세로 크기를 조정합니다.

initial-scale : 페이지가 처음 로딩될 때 줌 레벨을 조정합니다. 값이 1일때는 CSS 픽셀과 기기종속적인 픽셀 간의 1:1 관계를 형성합니다.

minimum-scale : viewport의 최소 배율값, 기본값은 0.25입니다.

maximum-scale : viewport의 최대 배율값, 기본값은 1.6입니다.

user-scalable : 사용자의 확대/축소 기능을 설정, 기본값은 yes입니다.

2. 정의된 속성 값

device-width : 기기의 가로 넓이 픽셀 값 (웹페이지의 가로(width) 값은 기기가 사용하는 가로 넓이 값(device-width) 만큼 적용하여 사용하라는 의미)

device-height : 기기의 세로 높이 픽셀 값

3. 주의사항

content 보다 작은 viewport width/height를 설정하면 무시됩니다.

viewport에서 initial-scale을 설정하지 않고 width/height를 설정하면 전체 화면이 표시됩니다.

viewport에서 initial-scale도 width/height를 설정하지 않으면 width=980px/height=1091px 이 됩니다.

표시 영역과 contents의 크기가 일치하지 않을때 initial-scale을 설정하면 의도하지 않은 layout이 발생합니다.