모바일 웹 개발을 위한 화면 크기 측정 속성 분석
Source
Evernote/Technote scraps/First, Understand Your Screen « James Pearce.md
Summary
이 문서는 모바일 웹 개발 시 화면 크기를 측정하는 다양한 JavaScript 속성(screen.width, window.innerWidth 등)과 CSS 미디어 쿼리 값들의 신뢰성을 분석합니다. 저자는 iOS, Android, Opera Mobile 등 다양한 브라우저와 환경(에뮬레이터, PhoneGap, 홈스크린 앱 등)에서 테스트한 결과를 제시하며, 표준화되지 않은 속성들이 기기 및 브라우저마다 매우 불일치하는 값을 반환함을 지적합니다. 특히 Android 브라우저에서의 결과 일관성 부족을 강조하며, 모바일 웹 성공의 첫 단계인 화면 크기 이해의 복잡성을 경고합니다.
Key Points
- 모바일 웹 개발에서 화면 크기(screen size) 측정은 필수적이지만, 사용 가능한 속성들의 정의가 표준화되지 않아 신뢰성이 낮음.
- screen.width, window.innerWidth, document.body.clientWidth 등 주요 속성과 @media 쿼리 값을 다양한 모바일 브라우저(iOS, Android, Opera)에서 비교 분석.
- 테스트 환경: 에뮬레이터 기반, HTML5/XHTML-MP/No Doctype, Viewport meta tag 유무, 방향(가로/세로), 페이지 라이프사이클 시점 등 12가지 조합 테스트.
- 결과: 브라우저와 환경에 따라 측정 값이 극도로 다양하고 불일치하며, 특히 Android 브라우저에서 예측 불가능한 결과가 다수 발생.
- 페이지 로드 과정 중(inline, load event 등)에도 측정 값이 변경될 수 있음.
- 결론: ‘화면 크기’라는 개념이 모바일 환경에서 단순하지 않으며, 개발자는 각 속성의 정확한 의미와 한계를 이해해야 함.