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

반응형으로 작업을 해보신분들은 아마도 아실겁니다.

아이폰의 경우 뷰포트가 변경이 되면 자동으로 폰트 크기를 조절합니다.

이걸 방지하는것이 text-size-adjust 입니다.

text-size-adjus 는 4가지 속성을 사용할 수 있습니다.

1. auto

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

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

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

2. none

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

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

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

3. percentage

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

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

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

4. inherit

상속되는 경우다.

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

text-size-adjus 의 기본값은 none 이다.

이 속성은 표준이 아니므로 벤더를 넣어서 사용해야 한다.

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

이 속성은 브라우져나 모바일이나 모두 적용이 됩니다.

그래서 Media Query를 사용하여 모바일에만 적용할 수도 있습니다. 예제로

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

demun(대문블로그)