[CSS, mobile] 모바일 웹에서 시스템 폰트에 따라 웹폰트의 크기가 달라질 때 해결 방법

배경

모바일 웹을 다 만들었다.

그런데 갑자기 오류가 있다고 한다. 그것도 JS등의 로직 오류가 아닌 CSS 오류?

그것도 모든 페이지에서?

 

알고보니 사용자가 휴대폰 자체의 폰트 크기를 키워서 난 오류였다.

 

알고보니 전의 회사에서도 있던 문제였는데, 잊어버렸다. 다시 알아봐야한다.

 

그런데 정말 열심히 찾아봤는데 이에 대한 자료가 없다.

 

그래서 네이버, 사람인 등을 들어가보며 개발자 도구를 열고, 뭐가 다른지 찾아보았다.

 

font-size를 em으로 썼나.. px로 썼나... 다 다른걸 보니 이 문제는 아니다.

어찌됐든 비교하고 비교해서 결국 찾아냈다.

 

width의 문제였다

하지만 거기서도 width를 %로 주냐.. px로 주냐.. 고민했다.

 

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

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

 

일단은

display: inline-block;

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

 

iOS의 경우

위의 문제는 안드로이드의 문제이고, 아이폰의 경우는 간단하다.

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

해당 속성으로 잡을 수 있다.