CSS와 Safari의 글꼴 크기 문제

iPhone의 Safari에서 예상치 못한 글꼴 크기 불일치가 나타나는 것이 관찰되었습니다. 특히 글꼴 크기가 작은(예: 13px) 텍스트는 크기가 큰(예: 15px) 텍스트보다 크게 나타납니다. 이 수수께끼 같은 행동은 질문을 제기합니다. Safari의 글꼴 크기 재정의를 담당하는 CSS 관련 또는 다른 요인이 있습니까?

이 미스터리를 해결하려면 모바일 장치에서 Safari의 중요한 측면을 이해하는 것이 필수적입니다. 사용자 친화적인 방법으로 Mobile Safari는 지나치게 작은 텍스트 렌더링의 위험을 감지하면 자동으로 텍스트 크기를 조정합니다. 이는 특히 작은 iPhone 화면에서 가독성을 높이기 위한 시도입니다. 이러한 자동 조정을 극복하기 위해 CSS 속성이 구출됩니다. -webkit-text-size-adjust.

다음은 iPhone 사용자의 글꼴 크기 혼란을 없애기 위한 실제 예입니다.

@media screen and (max-device-width: 480px) {
  body {
    -webkit-text-size-adjust: 100%;
  }
}

이 CSS 스니펫은 최대 기기 너비가 480px인 모든 휴대기기(예: iPhone 기기)를 대상으로 하며

결론적으로 Mobile Safari의 자동 텍스트 크기 조정은 작은 화면에서 가독성을 최적화하는 것을 목표로 합니다. 그러나 이로 인해 예기치 않은 글꼴 크기 동작이 발생할 수 있습니다. -webkit-text-size-adjust 속성을 사용함으로써 개발자는 글꼴 크기 조정을 다시 제어하고 iPhone을 포함한 다양한 장치에서 일관된 텍스트 표시를 보장할 수 있습니다.