text-size-adjust

모바일 페이지 작업을 할 때  크롬 모바일 모드/ 일반 디바이스에서는 문제없이 노출되던 텍스트들이 특정 디바이스 화면에서 유독 크게 보이는 경우가 있다.

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

 

1.text-size-adjust: none

기본값. 화면의 크기에 따라 크기를 조정하지 않음을 명시.

 

2. text-size-adjust: auto

화면의 크기에 따라 크기를 자동으로 조정( 되도록 사용하지 말 것!)

 

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