[css 속성] text-size-adjust

웹 반응형 작업을 하면서 크롬 모바일 모드나 다른 디바이스에는 문제 없이 보이던 텍스트 들이
몇몇 아이폰 모바일 웹으로 화면을 볼때 어떤font들은 이상하게 크게 보이는 경우가 있다.

IOS의 경우 뷰포트가 변경되면 자동으로 폰트 크기를 조절하기 때문이라고 한다.

텍스트 크기 조정을 위한 속성 text-size-adjust

text-size-adjust

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

• text-size-adjust: none;
  default 속성(기본값)으로 화면의 크키게 따라 크기를 조정하지 않음을 명시.(브라우저의 인플레이션 알고리즘을 비활성화)

• text-size-adjust: auto;
  화면의 크기에 따라 크기를 자동으로 조정할 수 있게 한다.
  (디바이스 마다 그 크기가 달라질 수 있기 때문에 사용 X,브라우저의 인플레이션 알고리즘을 활성화)

• 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;  /* 오페라 구버전 */
}

페이지에 반영해 본 결과 아주 만족스러운 결과를 얻었다!!!!!