[css 속성] text-size-adjust (모바일 폰트 크기 조정 관련)

모바일 페이지 작업을 할 때 크롬 모바일 모드나 일반적인 디바이스에서는

문제없이 노출되던 텍스트들이

 

특정 디바이스 화면(몇몇 아이폰)에서 유독 크게 보이는 경우가 발생할 때가 있다.

이러한 경우 영역이 깨지거나 원하는 페이지를 표현하는데에 어려움이 생긴다.

 

이럴 때 사용하는 속성이 text-size-adjust 라는 css 속성이다.

 

text-size-adjust는 비표준 속성이므로 벤더 프리픽스를 사용해야한다.

 

1. text-size-adjust : none

default 속성(기본값)으로 화면의 크기에 따라 크기를 조정하지 않음을 명시한다.

 

2. text-size-adjust : auto

화면의 크기에 따라 크기를 자동으로 조정할 수 있게 한다.

(디바이스마다 그 크기가 달라질 수 있기 때문에 되도록 사용하지 않는다.)

 

3. text-size-adjust : % (퍼센트)

특정 퍼센트(%) 값을 줘서 크기를 조정한다.

100%의 값을 줘서 모든 디바이스에서 동일한 텍스트 크기를 만들 수도 있고

퍼센트 값을 낮게줘서 디바이스별로 동일하게 작게 줄 수도 있다.

 

 

 

사용하는 예시는 아래와 같다.

html, body{
  -webkit-text-size-adjust : none;  /* 크롬, 사파리, 오페라 신버전 */
  -ms-text-size-adjust : none;  /* IE */
  -moz-text-size-adjust : none;  /* 파이어폭스 */
  -o-text-size-adjust : none;  /* 오페라 구버전 */
}

 

 

주로 실무를 하면서 많이 사용했던 방법은

위의 소스와 같이 text-size-adjust : none 값을 선언하거나 100% 값을 주는 방법이다.

 

none의 경우 기본값이긴 하지만 특정 디바이스의 경우엔 해당 값이 무시되러 렌더링 되는 경우가

있기 때문에 한번 더 적용을 시킨다.