CSS 브라우저 글꼴 크기 자동 확대 문제

사파리에서 일부 글꼴 크기가 설정한 값 보다 더 크게 확대되는 문제를 발견했는데, 미디어 쿼리의 사용이 문제인 줄 알았지만 브라우저의 문제였다.

모바일 사파리 브라우저에서는 텍스트 크기가 너무 작게 설정될 경우 자동으로 크기를 조절한다고 한다.

아래의 css 코드를 추가하여 확대를 막을 수 있다.

/* Prevent font scaling in landscape */
html {
    -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*/
}