HTML 모바일 웹 폰트 크기 커지는 문제 해결 방법

HTML 모바일 웹 개발을 하는데 특정 상황에서 폰트가 커지는 문제가 발생합니다.

 

안드로이드 크롬에서만 발생하고 (아이폰은 발생 안함, 데스크탑 크롬 디버깅 모드 모바일에서는 발생 안함)

텍스트 문장이 1줄을 넘어설 때만 발생함 (문장이 짧으면 발생 안함)

 

관련해서 검색해보면 두가지 해결 방법이 나오는데 이것을 해도 해결이 안됩니다.

 

- meta tag
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, interactive-widget=resizes-content" />

 

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

 

해결 방법

결국 찾은 해결의 실마리는 div에 height가 설정 안되어 있으면 이런 문제가 발생한다는 것입니다.

div에도 그렇고, table의 td에도 동일한 현상이 있습니다.

 

원래 코드

<div style="width: 100%; min-height: calc(100dvh - 216px);">
	<div>
		<span>
			HTML 모바일 웹에서 특정 상황에서만 폰트 크기가 커지는 현상이 발생하는 문제 해결 방법1
		</span>
	</div>
	<div>
		<span>
			HTML 모바일 웹에서 특정 상황에서만 폰트 크기가 커지는 현상이 발생하는 문제 해결 방법2
		</span>
	</div>
</div>

 

 

수정한 코드 (div에 height 설정함)

<div style="width: 100%; min-height: calc(100dvh - 216px);">
	<div style="width: 100%; height: 100%;">
		<span>
			HTML 모바일 웹에서 특정 상황에서만 폰트 크기가 커지는 현상이 발생하는 문제 해결 방법1
		</span>
	</div>
	<div style="width: 100%; height: 100%;">
		<span>
			HTML 모바일 웹에서 특정 상황에서만 폰트 크기가 커지는 현상이 발생하는 문제 해결 방법2
		</span>
	</div>
</div>