Ionic 시스템 글자 확대 시 앱에서 레이아웃이 깨지는 현상 (네이티브 앱 오류)

이번 시간은 Ionic으로 앱을 만들 때 발생하는 에러를 살펴보자.

어느정도 나이가 있으신 어르신 들은 보통 핸드폰에 글자 크기를 높여서 사용하신다.

(물론 우리 부모님도 확대해서 쓰신다)

앱을 만드는 사람들은 기존의 글자 크기 보통에 맞춰 작업을 한다. 그러다 보면 일부 확대해서 사용하시는 사용자들에게 레이아웃이 깨지는 현상을 볼 수 있다.

이것을 해결하려면 

setTextZoom(textZoom)  =>  글자 줌 설정 (int)




usePreferredTextZoom(value)  =>  시스템 글자 여부 설정 (true or false)

이 두가지를 이용해서 해결을 해야하는데 아이오닉에서는 찾아보면 아시겠지만 적용하기가 힘들다

그래서 지금부터는 아이오닉에서 이것을 해결하는 방법을 알아보자

Ionic 3

https://ionicframework.com/docs/native/mobile-accessibility/

위 링크로 가면 MobileAccessibility 플러그인이 있다.

위와 같이 Ionic cordova plguin add 명령어를 이용하여 플러그인을 설치 후

app.module.ts에 플러그인을 Import 한 후 방금 Import를 한 것을 provider에 넣어준다.

import { MobileAccessibility } from '@ionic-native/mobile-accessibility';

providers: [

    MobileAccessibility

]

그리고 난 후 app.component.ts로 이동하여  construtor에 MobileAccessibility를 가져온 후 platform.ready 안에 넣어주면 해결 된다.

constructor (public mobileAccessibility: MobileAccessibility) {

    platform.ready().then(() => {

        // 디바이스 기본 폰트사이즈 설정

        mobileAccessibility.setTextZoom(100); // 기본 폰트 줌 설정

        mobileAccessibility.usePreferredTextZoom(false); // 시스템 글자 크기 사용여부 설정

    })

}

궁금하신 사항에 대해서 댓글에 질문을 해주시면 답변해 드리겠습니다.

감사합니다.

오늘도 해피 코딩 하세요 !