모바일 폰트 크기 조정 관련 css 속성

9월 18, 2023

모바일 페이지 작업을 할 때 크롬 모바일 모드나 일반적인 디바이스에서는 문제없이 노출되던 텍스트들이 특정 디바이스 화면(몇몇 아이폰)에서 유독 크게 보이는 경우가 발생할 때가 있다.

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

이럴 때 사용하는 속성이 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의 경우 기본값이긴 하지만 특정 디바이스의 경우엔 해당 값이 무시되러 렌더링 되는 경우가 있기 때문에 한번 더 적용을 시킨다.

※ 이 사이트의 모든 포스팅은 협찬 및 유료광고를 포함하고 있지 않습니다. ※개인 취향에 따른 리뷰이니, 부디 참고만 하시길!

daily-inklings 전체 글 보기

이글은 9월 18, 2023 에 최종으로 업데이트된 글입니다.

이 블로그 검색

daily-inklings