몇몇의 모바일 브라우저에서는 텍스트 크기를 너비에 맞추어 자동으로 조절됩니다. 하지만 모바일 웹을 기준으로 작성하지 않은 웹 페이지일 경우 텍스트 크기가 어긋나게 보일 수 있습니다. 이같은 경우 별도의 속성을 입력해야 합니다.
이 기능은 5개의 대표 브라우저에서 Webkit 기반의 브라우저와 Firefox(밝혀진 바는 없음), Internet Explorer에서만 지원합니다. 아직 제정되지 않은 기술이므로 속성 앞에 브라우저의 특성을 입력해야 합니다. 브라우저의 특성을 입력하는 방법을 모르신다면 CSS3 가이드북 페이지에서 브라우저의 특성 링크를 클릭하세요.
html {
-webkit-text-size-adjust: 160%;
-moz-text-size-adjust: 160%;
-ms-text-size-adjust: 160%;
}-moz-text-size-adjust: 160%;
-ms-text-size-adjust: 160%;
text-size-adjust 속성은 브라우저의 상황에 따라 텍스트를 너비에 맞게 확대하거나 축소합니다. 브라우저에서 확대나 축소 기능을 사용했을 때에도 text-size-adjust 속성이 적용됩니다. text-size-adjust 속성의 값은 auto, none, 퍼센티지로 입력할 수 있습니다. 해당 속성을 자동으로 설정하려면 auto를, 속성을 끄려면 none을, 텍스트 크기를 퍼센트만큼 늘리거나 줄이려면 퍼센티지로 입력합니다. 대부분 모바일 브라우저에서 웹 페이지의 깨짐 현상을 방지하기 위해 text-size-adjust 속성을 none 값으로 입력하는 경우가 많습니다. 이 속성을 사용하려면 viewport의 maximum-scale 속성이 1 이하여야 합니다.
@media screen and (max-device-width: 480px) {
html {
}-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
}-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
그러나 text-size-adjust 속성은 모바일 브라우저 말고도 PC 브라우저에도 적용됩니다. 모바일 브라우저에서의 텍스트 크기 조절을 비활성화하려고 none 값을 입력하면 PC 브라우저에서 확대나 축소 기능 사용 시 텍스트 크기는 고정되므로 Media Query를 사용하여 모바일 웹 브라우저에서만 사용 가능하게 해야 합니다. 위의 코드는 CSS 내에서의 @media 구문을 사용한 예입니다.
※ 로그인 하시면 원본파일을 볼 수 있습니다. ※
코멘트 0
