모바일 웹 폰트 크기 자동조정 문제 (text-size-adjust)

PC화면 개발 후 그 화면을 모바일로 열었을 때 기존 text의 비율이 유지되지 않고 크기가 커지는 경우가 발생했다.

 

웹 사이트의 경우 화면비율에 맞게 요소들을 자동 조절하는 기능이 있어서 이러한 문제점이 발생한듯하다.

 

애초에 왜 모바일 반응형으로 개발하지 않았는지는 의문이 들지만..

 

다행히 해결 방법을 찾았다. 블로그 주인분의 지식공유에 감사를..

 

찾은 내용

---

 

모바일 웹 개발 시, 특정 사이즈 이상의 모바일 화면에서 font-size가 크게 보이는 경우가 있어요.

아이폰의 경우 뷰포트가 변경이 되면 자동으로 폰트 크기를 조절하기 때문입니다.

(ex IOS iphone8+, X에서 폰트 크기가 커짐/ 안드로이드는 괜찮은 것 같아요.)

​

이때 사용할 수 있는 속성이 text-size-adjust 입니다. (비표준 속성)

​

Css 파일에 아래코드 추가

html {

/* Prevent font scaling in landscape */

-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*/

}

 

 

Property

값	설명
auto	화면의 폭에 맞게 텍스트의 크기를 자동으로 조절 (디바이스의렌더링이 다르다면 다르게 렌더링되므로 추천하지 않음)
none(기본값)	기본값. 폰트 크기 조정을 하지 않음
percentage	폰트크기를 명시적으로 지정 (100%를 주어 모든 디바이스에서 동일하게 보여줄 수 있음/ 크게, 작게 가능)
inherit	부모 요소의 text-size-adjust 값을 물려받음

 

 

주의할 점

• 영어 소문자 크기를 조정하는 *font-size-adjust와 혼동하지 말것 ! *(number , none , inherit)

Property

값	설명
number	숫자로 직접 크기를 지정
none	기본값. 폰트 크기 조정을 하지 않음
inherit	부모 요소의 font-size-adjust 값을 물려받음

영어는 폰트의 종류에 따라 대,소문자의 크기가 다르게 표현 됨 (특히 소문자)

예를 들어 Verdana 의 대문자가 1 이라면 소문자 크기는 0.58 (Aspect Value) 의 크기인 것이다.

이러한 이유 때문에 브라우저에서 첫 번째 font 를 사용할 수 없게 될 경우, 두 번째로 지정된 폰트를 랜더링하는데 글자 크기가 같은 px 라도 들쭉날쭉하게 보여질 수 있다.

이런 것을 방지하기 위해 font-size-adjust 속성을 사용하게 되면 서로 다른 폰트 종류라도 소문자의 처음 지정된 폰트의 크기로 유지하여 가독성을 높일 수 있다. 하지만 현재 Firefox 에서만 지원한다.

 

출처 : 

http://siana.tistory.com/entry/CSS3-font-size-adjust-대채폰트의-크기조절-x-height-Aspect-Value

CSS3 font-size-adjust 대채폰트의 크기조절 x-height, Aspect Value

https://m.blog.naver.com/dlaskarud2/221437725863