반응형 웹사이트를 제작하다보면 미디어쿼리를 이용해서 모바일 화면의 폰트 크기를 지정하는 경우가 있다.

그런데 세로로 보는 상태에서 화면을 회전시켜 가로 모드 (Landscape)가 되면 텍스트들이 자동으로 커지는 현상을 발견할 것이다.

픽셀로 정의한 폰트가 아닌 가변적인 치수로 지정할 경우 그러한데 이는 스마트폰의 브라우져가 컨텐츠 정보를 읽기에 최적화된 모드로 렌더링하기 때문이다.

이에 디자인을 기반으로 em이나 %로 폰트 사이즈를 설정한 경우 회전하게 되면 디자인에서 벗어나게 되므로 낭패인 경우가 생긴다.

이럴 때는 body에 아래 css 를 추가해주면 된다.

-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;

 해당 코드는 pc에서는 지원되지 않는다. (어차피 회전을 할 일이 없으니까)\

추가 정보는 아래 링크를 참고한다.

https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust