모바일 디바이스별 글자크기 다름 / text-size-adjust

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

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

텍스트 크기 조정을 위한 속성 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;  /* 오페라 구버전 */
}

 

auto : 화면의 폭에 맞게 텍스트의 크기를 자동으로 조절

none : 텍스트의 크기를 자동으로 조절 막음

percentage : 이것은 폰트크기를 명시적으로 지정 (100%를 주어 모든 디바이스에서 동일하게 보여주게 하는 방식)