전역 스타일에 text-size-adjust를 사용합니까?-CSS 튜토리얼-php.cn

전역 스타일에 text-size-adjust를 사용합니까?

王林

풀어 주다： 2024-09-11 06:38:02

원래의

1260명이 탐색했습니다.

최근에 저는 실제 모바일 기기, 특히 iOS Safari에서만 나타나는 수수께끼의 CSS 문제를 우연히 발견했습니다. 특정 글꼴이 불균형적으로 크게 나타나 레이아웃 무결성이 손상되었습니다. 개발 도구에서 다양한 글꼴 크기를 적용하여 이 문제를 해결하려고 시도했지만 !important를 사용해도 효과가 없었습니다. 아래에서 원하는 화면과 제가 보게 된 화면을 보실 수 있습니다.

Do you use text-size-adjust in your global styles?

무슨 일이 일어나고 있는지 이해하기

조사 결과 모바일 브라우저가 사용자의 가독성을 높이기 위해 글꼴 크기를 동적으로 조정하는 경우가 있다는 사실을 알게 되었습니다. 모바일 브라우저의 렌더링 동작은 데스크톱 브라우저의 렌더링 동작과 다릅니다. 일반적으로 장치 화면의 너비에 따라 페이지를 렌더링하는 데스크톱 브라우저와 달리 모바일 브라우저는 작은 화면에 최적화되지 않은 웹 사이트를 수용하기 위해 일반적으로 기본값으로 980px로 설정되는 더 넓은 뷰포트를 활용합니다. 이로 인해 필연적으로 가로 스크롤이 발생합니다. 이에 대응하기 위해 아래 규칙은 HTML에서 일반적으로 사용되어 뷰포트 크기가 장치 크기에 정확하게 맞도록 조정됩니다.

<meta name="viewport" content="width=device-width, initial-scale=1" />

로그인 후 복사

그러나 모바일 화면에 맞게 크기를 축소하는 동안 일부 브라우저에서는 텍스트를 너무 작게 렌더링하여 가독성을 높이기 위해 텍스트 팽창 알고리즘을 적용하여 텍스트를 확대할 수 있습니다. 이 알고리즘은 때때로 예기치 않은 글꼴 확대로 이어지며, 특히 화면의 전체 너비에 걸쳐 있는 요소가 레이아웃을 변경하지 않고 텍스트 크기 확대를 경험할 때 두드러집니다. 이 문제를 해결하고 여러 기기에서 일관된 텍스트 크기를 유지하기 위해 CSS text-size-adjust 속성을 활용할 수 있습니다.

text-size-adjust를 사용하면 웹 작성자가 자동 텍스트 팽창 동작을 비활성화하거나 조정할 수 있습니다. 특히 작은 화면을 염두에 두고 설계된 웹 사이트(대부분의 새로운 웹 사이트가 그러하다고 생각합니다)에 중요합니다. 이 속성은 일부 스마트폰 및 태블릿에서 사용되는 텍스트 팽창 알고리즘을 제어합니다. 다른 브라우저에서는 이를 무시합니다. 기본 크기 조정은 해당 양식 컨트롤에 텍스트가 포함되어 있는지(예: 텍스트 입력, 선택) 여부(예: 라디오 버튼, 확인란)에 관계없이 텍스트 및 양식 컨트롤에 영향을 미칩니다.

가능한 값은 3가지입니다:

auto: 이 값은 소형 장치에서 텍스트를 렌더링할 때 렌더러가 기본 크기 조정을 활용하도록 지시합니다.
없음: 렌더러는 소형 장치에 표시되는 텍스트에 대해 크기 조정을 수행하지 않도록 지시됩니다.
백분율[0,무한]: 렌더러는 크기 조정을 수행해서는 안 되지만 대신 계산된 글꼴 크기 값에 이 백분율을 곱해야 합니다. 100%를 사용하는 것은 없음을 사용하는 것과 같습니다.

이 문제를 해결하는 나의 접근 방식

이 속성을 전역 CSS 스타일(html에도 추가 가능)의 일부로 본문에 추가하여 텍스트 팽창 문제를 해결했습니다. 전역/재설정/표준화 CSS 파일에 다음 규칙을 추가하는 것이 좋습니다.

body {
    // prevent font-size inflation on small devices
    text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

로그인 후 복사

iOS Safari의 경우에만 -webkit-text-size-adjust가 작동하지만 다른 브라우저에 대한 지원을 추가하기 위해 다른 공급업체와 비공급업체 속성을 포함했습니다. 처음에 비공급업체 속성을 추가하는 것이 매우 중요합니다. 마지막에 추가하면 Safari iOS에서는 -webkit을 재정의하고 지원하지 않으므로 적용되지 않으므로 기본적으로 작동합니다.

유념해야 할 몇 가지 기타 고려 사항:

실험적 성격: 프로덕션 환경에서 텍스트 크기 조정 속성을 구현할 때는 여전히 실험적 기능이므로 주의를 기울이는 것이 중요합니다. 브라우저 지원 및 구현은 시간이 지남에 따라 변경될 수 있습니다.
'소형 기기'의 정의: '소형 기기'를 구성하는 요소에 대한 정의는 여전히 모호합니다.
어떤 사람들은 none을 사용하면 모바일에서 확대/축소가 불가능하다고 불평했지만, 제가 테스트했을 때는 그렇지 않았고, 아무 것도 없고 100% mdn 설명과 동일하게 작동했습니다.