[css] text-size-adjust

테이블 코딩한 cell의 폰트 사이즈가 특정 iOS 모바일 디바이스에서 들쭉날쭉 크게 보이는 현상이 있었다

 

iOS는 viewport가 변경되면 자동으로 font size를 조정하는데 그에 따른 현상이라고 한다

 

이때 필요한 text-size-adjust

 

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

 

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;
기본 속성. 화면의 크기에 따라 크기를 조정하지 않음

text-size-adjust: auto;
화면의 크기에 따라 텍스트 사이즈를 자동으로 조정
(디바이스마다 텍스트 크기가 달라질 수 있기 때문에 보통은 사용하지 않음)

text-size-adjust: %;
특정 퍼센트 값을 줘서 크기를 조정

100%를 부여하면 모든 디바이스에서 폰트 사이즈가 동일해진다

퍼센트 값을 낮게 부여하면 모든 디바이스 동일하게 작게 보이도록 조정 가능 (글꼴 크기를 늘릴 백분율 값을 지정하여 브라우저의 팽창 알고리즘을 활성화)