안녕하세요.

 

모바일 페이지를 만드는데 적용된 폰트 크기가 갤럭시와 아이폰에서 다르게 나타날때 어떻게 맞추어 주어야 할까요

 

갤럭시에서는 1줄에 다 나오는것이 아이폰에서는 폰트가 크게 적용이 되어 줄바꿈되어 2줄로 나오는데

 

이걸 동일하게 맞출수 없을까요?

  • profile

    갤럭시, 아이폰도 기종에 따라 화면 크기가 제각각이고, 글자 크기도 사용자가 마음대로 설정할 수 있기 때문에 모든 폰에서 동일한 크기로 보이도록 하는 것은 무의미한 시도입니다. 갤럭시 S23 울트라가 아이폰 SE3보다 넓은 것이 당연하고, 아이폰 14 프로 맥스가 갤럭시 Z플립보다 넓은 것이 당연하잖아요. 운영자분과 같은 기종을 쓰는 사람은 극소수에 불과하겠지요. 경우의 수가 너무 많아요. 심지어 정사각형에 가까운 Z폴드 같은 물건도 나오는 판인데...

     

    두 줄로 나오더라도 괜찮도록 디자인하거나, 아니면 넘어가지 않고 "..."으로 처리되도록 CSS에서 white-space, overflow, text-overflow 설정을 적당히 해주면 어디에서나 나름 쓸만하게 나옵니다. 구형 위젯들처럼 서버단에서 cut_str()으로 글자수를 제한하는 것은 국민PC라는 이름으로 전국민이 거의 똑같은 크기의 모니터를 사용하던 2000년대 초반에나 통하던 트릭이지요.

  • ?

    저도 이 문제로 많이 고민했는데, 100% 동일하게 디자인은 못할 것 같더군요.

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

    layout css에 이 설정을 적용하시고, 개별적으로 폰트 크기가 많이 차이나는 부분은 rem 단위로 수정해야합니다.