안드로이드 screen 사이즈 보정하기

발생일: 2014.12.01

키워드: 안드로이드 인앱 브라우저, android in app browser, 안드로이드 스크린 크기, android screen size, screenWidth, screenHeight, clientWidth, clientHeight, deivcePixelRatio

문제:

특정 페이지에서 screen.width 와 screen.height 값을 사용하는데,

일부 안드로이드 브라우저에서 해당 값이 디바이스의 크기가 아니라 해상도 기준으로 설정되는 문제가 있다.

해결책:

일부 안드로이드 기본 브라우저들은 스크린 너비, 높이 값이 디바이스 해상도 기준으로 설정되는 등 의도치 않은 값이 할당되어 있는 경우가 있다.

작업은 동료 A가 진행했는데, 보정 기준은 아래와 같다.

- 기본적으로 대부분의 디바이스와 브라우저는 세로 모드를 기준으로 스크린 너비와 높이를 설정

- 안드로이드 기본 브라우저는 스크린 너비와 높이 값이 window.devicePixelRatio를 곱한 값으로 나오기 때문에, devicePixelRatio만큼 나눠서 보정

- screenWidth/screenHeight 값을 devicePixelRatio로 나눠서 사용해야 하는지를 판단 기준

    - clientWidth/clientHeight, screen.width/screen.height 등의 값이 일부 기기에서는 회전에 영향을 받기 때문에,

        각각 작은 값을 width로, 큰 값을 height로 간주하고 처리

    - clientWidth/clientHeight 로 비교

        - 작은 값과 screen.width/screen.height의 작은 값이 같은 경우

        - 큰 값과 screen.width/screen.height의 큰 값이 같은 경우

        - 참고로, innerWidth/innerHeight 는 안드로이드 기본 브라우저나 웹뷰에서 body 엘리먼트가 생성되기 전에는 값이 설정되지 않을 수 있어 clientWidth/clientHeight를 사용

- document.documentElement나 document.body의 clientWidth/clientHeight 값을 이용하여 비교

- 참고로, 안드로이드 폰 중 소프트키 메뉴가 있는 경우, 소프트키는 screen 영역에 포함되지 않음