안드로이드 웹뷰에서 시스템 폰트 설정과 상관없이 폰트 사이즈 고정하기

업무 하면서 마주친 이슈들, 기억하고 기록하고 정리해보자.
※ 해결방법만 빠르게 보고 싶은 사람은 바로 🛠 ISSUE 해결 부터 확인해주세요 (_ _)

---

🚧 ISSUE

ISSUE : 세로모드 페이지 내 폰트 간헐적으로 작게 노출 (앱 default 가로모드)
테스트 환경 : Galaxy S8 / Android 8 , Google Pixel 4a / Android 11

앱 내 웹뷰 마크업 할 때, 다양한 해상도에 대응하기 위해 px이 아닌 vw와 vh를 단위를 사용하였다.
(설계 가이드 자체가 해상도 혹은 디바이스 별로 받은 것이 아니기도 했다. 4:3, 20:9 ... 이런 식으로 받아서 비율에 맞게 단위 변화가 필요했다.)

단위가 고정값이 아니다보니 아무래도 시스템 설정에서 폰트 사이즈나 해상도 사이즈가 변경되면 앱 내 웹뷰 또한 변경되기 마련이었다 😂

FE분과 각자 방법을 찾아보고 정 해결법이 없으면 크리티컬한 이슈는 아니기에 논이슈 처리 하는 방향으로 진행하자고 이야기 한 후 방법을 찾아보았다.
(사실 이때 안드로이드는 해상도부터 시작해 너무나 다양한 것을 입맛대로 조정할 수 있다는걸 알았다. 난 아이폰 유저라 그런거 없다구.. 😂)

사실 위 이슈가 나는 어떻게 적용해봐도 잘 재현이 되지 않았다.
(재현이 되지 않아 이슈 해결하기가 더 어려웠다.. 😂)

우선 3가지 방법을 제안 했다.

• meta 태그에 maximum-scale=1.0 추가
• html, body 전체에 scale : 1; 추가
• 텍스트 크기 고정을 위한 앱 코드 추가

자세하게 설명하긴 어렵지만 위 이슈는 단순 해상도만의 문제는 아니었고 다른 여러가지가 겹쳐진 문제긴 했지만.. 결론적으로 말하자면 텍스트 크기 고정을 위한 앱 코드 추가 도 해결방안 중 하나였다.

🛠 ISSUE 해결

안드로이드에서는 시스템 설정에서 화면 해상도, 글자 크기 등 다양한 것들을 조정할 수 있다.
시스템 설정에 의해 앱 내 웹뷰의 폰트 사이즈가 변경되는 것을 막기 위해 아래 방법을 사용할 수 있다.

body { -webkit-text-size-adjust:none; }

// 위 방법의 경우 태그 안의 내용이 길어질 경우, 다른 태그들의 크기가 고정되지 않는다.
// float: left; 를 줌으로 해결이 어느정도 가능하지만 이 경우 css 추가 작업이 필요해 공수가 많이 들 수 있다.

하지만 위 방법이 먹히지 않을 경우 안드로이드 개발자님에게 아래 앱코드 추가 요청을 하자.

webview.getSettings().setTextZoom(100);

// API 버전이 14보다 낮을 경우
WebView wv = (WebView)appView.getView();
if (Build.VERSION.SDK_INT > Build.VERSION_CODES.ICE_CREAM_SANDWICH) {
    wv.getSettings().setTextZoom(100);
}

---

참고 링크
https://www.demo2s.com/android/android-websettings-settextzoom-int-textzoom.html