뷰포트
<meta name="viewport" content="width=device-width">뷰포트는 작업할 때 위 메타태그로 항상 접하지만
실질적으로 뷰포트가 확실하게 뭔지 설명하기는 어려웠습니다.
쉽게 말해서 뷰포트는 모바일 웹페이지에서 컨텐츠가 노출되는 영역을 의미합니다.
1. 메타태그 뷰포트 미 설정 시 safari 기본값은 980px이라서 첫번째와 같이 노출됩니다.
2. width=device-width 설정하게 되면 두번째 이미지와 같이 뷰포트가 화면크기에 자동으로 맞춰집니다.
3. 기종 하나에만 대응하는 경우 width=100 처럼 고정 값을 주면 뷰포트가 맞춰집니다.
TMI)
태블릿 기기 하나에 정확한 픽셀로 맞춰달라고 해서 작업 진행함
해당 기기 출시 전이었고, 해상도만 알고 있는 상태
해상도 가로 2800이었고, 1400으로 디자인/퍼블 진행
실제 기기 화면크기가 1318이었음, 아마 ratio가 정확히 2배수가 아니었던 것 같음
ratio는 제각각일 수 있음 아이폰 12미니도 2.88임
결론 뷰포트 1400으로 고정시킴 > 해결
(웹뷰는 앱자체 설정필요)
해상도
해상도란 이미지를 표현하는데 얼마나 많은 픽셀로 이루어졌는가?를 나타냅니다.
같은 해상도라도 화면크기에 따라 선명도가 달라지기 때문에 PPI라는 밀도 단위를 사용해서 선명도를 측정합니다.
PPI
PPI(Pixel Per Inch)는 1인치당 픽셀이 몇 개인지 나타낸 것으로 즉 픽셀의 밀도를 나타냅니다.
PPI가 높을 수록 더 선명한 이미지 표현이 가능합니다.
모바일 기기의 경우 시청거리가 짧고 화면이 작아 PPI가 높아야 선명하다고 느껴지기 때문에 일반적으로 PPI가 높습니다.
물리픽셀과 논리픽셀
모바일 기기 작업시 물리 픽셀 대신 컨텐츠를 화면에 맞춰서 볼 수 있는 논리 픽셀 개념을 사용합니다.
아이폰11을 예로들자면
물리픽셀은 828x1792
논리픽셀은 414x896
즉, CSS로 구현하는 화면크기(뷰포트)은 414px이지만,
실제 해상도는 828px이며 2배의 밀도를 가지고 있습니다.
이렇게 논리 픽셀과 물리 픽셀의 비율을 device-pixel ratio 라고 부릅니다.
아이폰 11은 ratio 2입니다.
아이폰 11에 해상도가 414px인 이미지를 적용해 놓는다면, 828px 해상도에 414px 이미지가 적용된 거기 때문에 이미지가 늘어나서 화질이 떨어지는 것을 확인할 수 있습니다.
결론적으로 이러한 이슈 때문에 물리 픽셀 기준으로 작업된 디자인을 받아서 논리 픽셀로 적용하는 것입니다.
일반적인 모바일 작업 기준 디자인 750px으로 작업하고, 퍼블 375px로 작업 진행합니다.
Q. 왜 해상도 반을 줄여서 작업하신거죠?
A. 해상도는 화면크기가 아니라 픽셀갯수이고 모바일은 고해상도라서 두배 세배 해상도를 가지고있습니다.
그래서 화면크기는 일반적으로 해상도 반줄여서 작업합니다.
