text-size-adjust 브라우저의 텍스트 크기 조절

반응형으로 작업을 해보신분들은 아마도 아실겁니다.
아이폰의 경우 뷰포트가 변경이 되면 자동으로 폰트 크기를 조절합니다.
이걸 방지하는것이 text-size-adjust 입니다.

text-size-adjus 는 4가지 속성

auto

html { -webkit-text-size-adjust: auto; }

화면의 폭에 맞게 텍스트의 크기를 자동으로 조절한다.

자동으로 조절한다는것은 디바이스의 렌더링이 다르다면 다르게 렌더링이 되므로 추천하는 방식은 아니다.

none

html { -webkit-text-size-adjust: none; }

텍스트의 크기를 자동으로 조절하지 말라는 뜻이다.

대체적으로 많이 사용하는 방법이다. 일반적으로 body 의 폰트크기를 설정하고 미디어쿼리를 사용하여 좀더 세밀하게 조절해서 사용하고 위의 속성을 사용하여 자동으로 조절하지 못하게한다.

percentage

html { -webkit-text-size-adjust: 100%; }

이것은 폰트크기를 명시적으로 지정해주는 것이다.

이 방법도 경우에 따라 자주 사용하는 방법이다. 명시적으로 100%를 주어 모든 디바이스에서 동일하게 보여주게 하는 방식이다. 물론 크게도 가능하고 작게도 가능하다.

inherit

상속되는 경우다.
부모요소의 속성값을 상속받아 적용되는 형식이다.

text-size-adjus 의 기본값은 none 이다.
이 속성은 표준이 아니므로 벤더를 넣어서 사용해야 한다.

html { 
    -webkit-text-size-adjust: none; 
    -moz-text-size-adjust: none; 
    -ms-text-size-adjust: none; 
}

@media all and (max-width: 480px) { 
    html { 
    -webkit-text-size-adjust: none; 
    -moz-text-size-adjust: none; 
    -ms-text-size-adjust: none; 
   }

 }