아이폰에서 폰트 크기가 제대로 적용이 안돼요...

Next.js에서 개발을 진행하고 있는데, 아이폰 환경에서는 폰트의 크기가 제대로 적용되지 않는 문제가 발생했다. 

폰트 크기는 분명 적용했고 다른 요소의 컴포넌트는 제대로 폰트가 적용이 되는데 딱 하나의 컴포넌트만 적용이 안됐다. 

 

iOS 모든 환경에서 안되는 것이 아닌 아이폰에서만 발생하는 문제였다. 맥북에서는 정상적으로 동작했다. 

 

환경은 

Next.js / Styled Components 를 사용하고 있다. 

 

혹시 Styled Components와 Next.js를 함께 사용하면 발생하는 문제일 수 있다고 생각해서 Styled Components 대신에 

CSS를 사용도 해봤다. 

 

하지만 여전히 문제는 해결되지 않았다. 

이유를 열심히 찾아보니 아이폰에서는 뷰포트가 변경되면 자동으로 폰트 크기를 조절하고 있단다....

( 할꺼면 다 하거나, 왜 맘대로 폰트 크기를,,,, ㅠ )

 

이때 text-size-adjust 속성을 사용하면 된다고 한다. 

 

그래서 html 스타일에 다음과 같이 추가를 해줬다 :

html {
      /* Prevent font scaling in landscape */
     -webkit-text-size-adjust: none; /*Chrome, Safari, newer versions of Opera*/
     -moz-text-size-adjust: none; /*Firefox*/
     -ms-text-size-adjust: none;  /*Ie*/
     -o-text-size-adjust: none; /*old versions of Opera*/
}

 

default 값이 분명 none이라고 알고 있는데,어째서.... 

 

혹시 나처럼 이유 없이 아이폰에서 폰트 크기가 마음대로 변경이 된다면 해당 속성을 사용해보시길...

( 언젠가 이유를 찾을 수 있겠지만 Soon 이 제일 어려운듯 ... )