jQuery Mobile - 10.모바일 접속시 화면에 맞게 크기 설정하기

이제까지 작성한 예제로 웹을 구성하고 모바일로 실제 접속을 하니 UI 와 글씨등 모든게 작아보여집니다.

viewport 뷰포트를 설정해주시면 됩니다.

viewport는  화면에 보여지는 것들에 대해서 표현되는 영역을 말하고 있는데요.
화면의 넓이, 줌 레벨, 스케일기능등을 설정 할 수 있습니다.

보통의 viewport 설정은 <meta name="viewport" content="width=device-width" />하는데요.
포털 사이트에서 개발된 모바일 웹사이트에 viewport 설정된 부분을 보니 모두 동일하네요.

 

<meta name="viewport" content="user-scalable=no,
                               initial-scale=1.0,
                               maximum-scale=1.0,
                               minimum-scale=1.0,
                               width=device-width,
                               height=device-height">

user-scalable : 확대/축소 가능여부
initial-scale : 최초 확대 비율 ex)100% -> 1.0
maximum-scale : 스케일 변경시 비율 최대값
minimum-scale : 스케일 변경시 비율 최소값
width : 가로 길이 px, 보통은 device-width
height : 세로 길이 px, 보통은 device-height