css

CSS TIP! – 모바일에서 가로뷰(Landscape view) 볼 때 텍스트 커지는 문제 해결방법

핑계/ editor

  • 1 comments
  • 1,034 views
  • 2017년 9월 2일

모바일에서 웹페이지 확인해보면 세로뷰(Vertical view)는 아무런 문제가 없는데 가로뷰(Landscape view)로 돌려보면 폰트가 갑자기 커져서 놀란적 있으시죠??
모바일 화면 가로뷰(Landscape view)에서 갑자기 폰트가 커지는 문제를 해결해보아요~

미디어 쿼리를 사용해서 반응형 웹페이지를 만들어서 모바일 화면에서 확인해보면 아이폰화면 가로뷰에서 폰트가 갑자기 확 커져서 레이아웃이 깨지는 경우가 있죠? 폰트 사이즈를 바꾸고 이거저것 무슨짓을 해봐도 해결방법이 없더라구요~

 

알아보니 가독성을 위해서 자동으로 폰트 조절을 하는 아이폰 자체의 기능이라고 하더라구요.

위의 이미지는 제 핸드폰(아이폰6s) 화면을 캡쳐한 것입니다.
<p>가 <span>보다 font-size가 더 작은데 가로뷰에서는 <p>가 더 크게 보이는것을 볼 수 있습니다.
사용자들이 가로뷰를 보지 않기만을 기도해야 하나요?ㅎ

 

그런데 폰트 커지는 문제를 잡아주는 간단한 방법이 있더라구요.
지금부터 공유해볼께요 ~

 

html {-webkit-text-size-adjust: 100%;}

html 이나 body 요소에 이렇게 써주면 끝납니다.

 

text-size-adjust 속성은
일부 “모바일 장치에서 사용되는 텍스트의 사이즈를 조절하는 기능을 제어하는 속성”입니다.

text-size-adjust는 3가지 속성을 가지고 있습니다.

 

1. auto

html {-webkit-text-size-adjust: auto;}

화면이 폭에 맞게 텍스트의 크기를 자동으로 조정합니다.
-webkit-text-size-adjust 의 기본값이 auto 이기 때문에 핸드폰을 가로로 돌렸을 때 자동으로 폰트 조절을 하는 아이폰 자체의 기능때문에 폰트 크기가 디자이너의 의도와 다르게 보이게 됩니다.

2. none

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

텍스트의 크기를 자동으로 조정하는 기능을 못하게 합니다.
이 기능은 모바일뿐 아니라 데스크탑에까지 영향을 주는데요.
브라우저의 확대/축소 기능을 사용할 때 텍스트의 크기를 조정할지의 여부를 조정합니다. 그래서!
데스크탑에서 ‘⌘ +’를 눌러 브라우저를 확대하면 레이아웃이나 이미지는 커지지만
텍스트는 커지지 않는 버그가 발생한다고 합니다.

이렇게 되면 안되겠죠??

3. percentage(%)

html {-webkit-text-size-adjust: 100%;}

텍스트 크기를 백분율값을 사용해서 조정합니다.
-webkit-text-size-adjust의 값을 100% 라고 적어주면 디자이너가 처음에 의도한 텍스트 크기를 100% 그대로 보여주기 때문에 버그도 발생하지 않고 가장 많이 쓰이는 안전한 방법입니다.

 

 

 

참고사이트: 아이폰의 폰트 사이즈를 고정 시키는 방법 | MDN > text-size-adjust | blog.55minutes

핑계

댓글 먹고 살아요~

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
danbi Recent comment authors
newest oldest most voted
danbi
Guest
danbi

감사합니다~:D