[TMI] HTML 모바일 웹 폰트 크기 자동조정 문제 해결 방법 – text-size-adjust
This post was written on November 28, 2020

웹에서 데스크탑/랩탑과 모바일이 서로 폰트 사이즈를 다르게 표현하는 것을 최근에 알았다. 대체적으로 자동 변경되는 것이 나쁘지 않아서 그대로 뒀었는데, 문제가 되는 부분이 있어서 급히 해결 방법을 찾게 되었다.

[1] 모바일에서 웹 페이지 전체에 폰트 사이즈 자동 조정을 막으려면, 아래의 내용을 CSS에 추가하면 된다.

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*/
}

[2] 아래처럼 특정 부분에 대해, style로 간단히 적용할 수도 있다.

<div style=”-webkit-text-size-adjust: none; -moz-text-size-adjust: none;-ms-text-size-adjust: none;-o-text-size-adjust: none;”></div>
<span style=”-webkit-text-size-adjust: none; -moz-text-size-adjust: none;-ms-text-size-adjust: none;-o-text-size-adjust: none;”></span>





HS LOG List of TMI

Copyright © HS LOG
Published on November 28, 2020 Filed under: TMI; Tagged as: , , , , , , , ,

No Comments

Thank you for visiting. If you leave a comment, I will not forget.

HS LOG List of TMI

 
The number of visitors for this post is 3,440 (measured by Jetpack).