안드로이드 설정의 폰트크기 조절에 따른 웹뷰폰트 크기 고정 -webkit-text-size-adjust:none 안먹힐때

 

안드로이드 설정의 폰트크기 조절에 따른 웹뷰폰트 크기 고정

안드로이드에서 폰트크기를 기기내 설정값에서 조절하여 사용할때 웹뷰에서 의도치않은 폰트크기가 나올때 제어 방법이다.

 

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

CSS속성의 -webkit-text-size-adjust:none을 추가하였지만 태그안에 글자가 길어졌을때 다른 태그들의 크기가 고정이 안되는 현상. (아이폰의 경우는 위로 해결)

 

<div>
<strong>제목</strong>
<ul>
<!-- 2~3줄 이상일때 버그 발생, 1줄일때는 정상 작동 -->
<li>테스트내용테스트내용테스트내용테스트내용테스트내용테스트내용테스트내용테스트내용테스트내용테스트내용테스트내용테스트내용테스트내용테스트내용테스트내용테스트내용테스트내용테스트내용테스트내용테스트내용테스트내용</li>
</div>

이런 코드일때 -webkit-text-size-adjust: none 속성이 적용되지 않는다.

해결방법을 찾던중 해당 속성에 float:left 를 추가하면 -webkit-text-size-adjust: none이 작동하지만 레이아웃이 깨져 다른 CSS추가 작업이 필요해 공수가 많아져 다른 방법을 찾아보았다.

 

해결법

1. 안드로이드 개발자에게 다음 코드를 웹뷰에 추가 해달라고 요청

webview.getSettings().setTextZoom(100);

위의 코드를 추가하니 정상 렌더링이 되었다.

 

2. 모바일웹일경우

공통점은 display: block인 아이들이었다.

width: 100% 같이 너비를 많이 차지할수록 그 비율에 달라진다거나 하는 것 같다.

일단은

display: inline-block;

으로 폰트 사이즈는 잡았다. 이후 또 오류가 있는 부분에 너비를 조정해야 할 것 같다.

혹은

float:left

하지만 이경우 css 손볼일이 많을듯