티스토리 뷰
Viewport : 뷰포트
PC에서의 1px과 모바일에서의 1px은 다르다. 모바일은 해상도에 비해 화면크기가 pc보다 작기 때문에, pc에서의 1px을 아무런 설정없이 그대로 쓰면 모바일에서는 너무 작고 얇게 나타나는 경우가 있다.ㅜㅜ 실제로 모바일에서 설정된 px크기는 pc보다는 조금 크고 두꺼운 편.
모바일에 맞게 화면의 px값이나 컨텐츠들을 잘 보일수 있게 대응해주는 태그를 사용해야 하는데, 그게 meta 태그인 view port라는 태그다.
<meta name="viewport" content="width=device-width, initial-scale=1">
완전 기본 viewport값이다. 여기서는 현재 사용하는 기기에 px 크기 맞추도록 설정되어있고, 기본 배율이 1:1로 지정되어있다. 까지만 설정 된 상태.
content=" " 여기사이에 아래에서 사용하는 속성들을 지정 해 사용할 수 있다.
- width= 뷰 포트의 너비(가로). 기본값 =device-width
- height= 뷰포트의 높이(세로). 기본값 =device-height
- initial-scale= 초기배율. 기본 값=1 (1:1로 대응한다는 뜻.)
1보다 작은 값이면 축소된 페이지로 표시, 1보다 큰 값이면 확대된 페이지로 표시된다. - user-scalable= 사용자가 페이지를 확대/축소할 수 있는지 여부
(쉽게 풀어쓰자면~ 스마트폰으로 손가락 늘려서 확대하는 짓 해도 되는지...ㅋㅋㅋ)
yes/no로 설정한다. - minimum-scale= 만약 사용자가 페이지를 축소할 경우의 최소 값 (가로기준). 기본값 0.25(25%)
- maximum-scale= 만약 사용자가 페이지를 확대할 경우의 최대 값 (가로기준). 기본값 0.5(500%)
(minimun-scale과 maximum-scale의 경우에 각각 1.0으로 지정하면 user-scalable=yes로 해도 확대, 축소가 불가능함) - target-densityDpi= 고해상도 단말기의 화면해상도에 맞출 수 있도록 페이지 확대.
기본값=device-dpi, 회사에서 쓰던값은 =midium-dpi
(이건...음... 고해상도 단말기가 최신폰인지 어르신들쓰는 폰인지 햇갈려서 정확한 개념을 모르겠다. 조금 더 공부해야함.)
회사에서 썼던 viewport값
<metaname="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, target-densityDpi=midium-dpi">
= 모바일 가로 해상도에 맞게, 배율도 1:1 비율로 하되, 사용자가 확대해도 확대할 수 없고, 단말기 화면해상도는 m-dpi로 설정할 것.
# user-scalable=no 로 설정한 이유는 아마도 안드로이드 제작할 때, 웹뷰로 웹페이지를 불러온 경우에 해당 페이지가 확대하지 않도록 설정한 듯 싶다.
(모바일 어플에서 확대하는 순간 애러가 나기 때문인지, 아니면 웹페이지로 제작한 걸 들키고 싶지 않아서인지는 모르겠다.)
뭐랄까... 안드로이드 개발할때 디자인 얹을때가 가장 어려워보였다. 나는 아예 안드로이드가 뭔 구조로 되어있는지도 모르겠고, 같이 하시는 분들도 디자인 얹을 때 가장 시간을 잡아먹어서 그런지...ㅜㅜ 급하면 그냥 웹페이지로 만들고 웹뷰로 불러오는 작업을 많이했었다.ㅜ
이 부분에 관련 하여 피드백이나 추가로 공부한게 생기면 추가할 예정입니다..//
댓글과 관심과 광고 클릭 부탁드려요~