root 속성정리

 	root{
	-webkit-tap-highlight-color: transparent;
     👉 -webkit-text-size-adjust: 100%; 👈
    text-size-adjust: 100%;
    cursor: default;
    line-height: 1.5;
    overflow-wrap: break-word;
    -moz-tab-size: 4;
    tab-size: 4
    }

---

-webkit-text-size-adjust: 100%;;

모바일 페이지 작업을 할 때 크롬 모바일 모드나 일반적인 디바이스에서는
문제없이 노출되던 텍스트들이 특정 디바이스 화면(몇몇 아이폰)에서 유독 크게 보이는 경우가 발생할 때가 있다.
이러한 경우 영역이 깨지거나 원하는 페이지를 표현하는데에 어려움이 생긴다. 이럴 때 사용하는 속성이 text-size-adjust 라는 css 속성이다.
text-size-adjust는 비표준 속성이므로 벤더 프리픽스를 사용해야한다.

text-size-adjust : none

default 속성(기본값)으로 화면의 크기에 따라 크기를 조정하지 않음을 명시한다.

text-size-adjust : auto

화면의 크기에 따라 크기를 자동으로 조정할 수 있게 한다.
(디바이스마다 그 크기가 달라질 수 있기 때문에 되도록 사용하지 않는다.)

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

주로 실무에서 많이 사용하는 방법은 위의 소스와 같이
text-size-adjust : none 값을 선언하거나 100% 값을 주는 방법이다.

none의 경우 기본값이긴 하지만 특정 디바이스의 경우엔 해당 값이 무시되어 렌더링 되는 경우가 있기 때문에 한번 더 적용을 시킨다.