Safari (iPhone)에서 일부 글꼴 크기가 더 크게 렌더링 됨

Safari / iPhone이 일부 글꼴 크기 설정을 무시하는 CSS 또는 다른 이유가 있습니까? 내 특정 웹 사이트에서 iPhone의 Safari는 font-size : 15px 텍스트보다 큰 font-size : 13px 텍스트를 렌더링합니다. 일부 요소에서 글꼴 크기를 지원하지 않을 수 있습니까?

Joe의 답변에는 몇 가지 좋은 모범 사례가 있지만 설명하는 문제는 Mobile Safari가 텍스트가 너무 작게 렌더링 될 것이라고 생각하면 자동으로 텍스트 크기를 조정한다는 사실에 집중되어 있다고 생각합니다. CSS 속성으로이 문제를 해결할 수 있습니다 -webkit-text-size-adjust. 다음은 iPhone에서만 이것을 신체에 적용하는 방법의 샘플입니다.

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

없음 대신 100 %를 사용하십시오.

normalize.css 에는 다음이 포함됩니다.

또한 뷰포트 메타 태그에서 초기 확대 / 축소 설정을 1로 설정했는지 확인하십시오.

<meta name="viewport" content="width=device-width; initial-scale=1.0;" />

픽셀 정의는 더 이상 사용하지 않습니다. 픽셀 정의는 정말 혼란스럽고 시각적 서비스에서 정확히 동일하지 않기 때문입니다.

유닛 만나기

1. "Ems"(em) : "em"은 웹 문서 미디어에서 사용되는 확장 가능한 단위입니다. em은 현재 글꼴 크기와 같습니다. 예를 들어 문서의 글꼴 크기가 12pt이면 1em은 12pt와 같습니다. Ems는 본질적으로 확장 가능하므로 2em은 24pt, .5em은 6pt 등입니다. 확장 성과 모바일 장치 친화적 인 특성으로 인해 Ems는 웹 문서에서 점점 인기를 얻고 있습니다.
2. 픽셀 (px) : 픽셀은 화면 미디어에서 사용되는 고정 크기 단위입니다 (예 : 컴퓨터 화면에서 읽을 수 있음). 하나의 픽셀은 컴퓨터 화면의 하나의 점과 같습니다 (화면 해상도의 최소 분할). 많은 웹 디자이너는 웹 문서에서 픽셀 단위를 사용하여 사이트가 브라우저에서 렌더링 될 때 완벽한 픽셀 표현을 생성합니다. 픽셀 단위의 한 가지 문제점은 시각 장애가있는 독자의 경우 위로 확장하거나 모바일 장치에 맞게 아래로 확장하지 않는다는 것입니다.
3. 포인트 (pt) : 포인트는 전통적으로 인쇄 매체 (종이에 인쇄되는 모든 것)에서 사용됩니다. 1 포인트는 1/72 인치와 같습니다. 포인트는 고정 된 크기 단위이며 크기를 조정할 수 없다는 점에서 픽셀과 매우 유사합니다.
4. 백분율 (%) : 백분율 단위는 몇 가지 근본적인 차이점을 제외하고는 "em"단위와 매우 유사합니다. 무엇보다도 현재 글꼴 크기는 100 %입니다 (즉, 12pt = 100 %). 백분율 단위를 사용하는 동안 텍스트는 모바일 장치 및 접근성을 위해 완전히 확장 가능합니다.

나는 똑같은 문제가 있었고 원본 CSS에서 다음 줄이 있음이 밝혀졌습니다.

-webkit-text-size-adjust : 120 %;

100 %로 변경해야했고 모든 것이 순조로 웠습니다. 모든 px를 em 또는 %%로 변경할 필요가 없습니다.

또한 조작하는 요소에 "너비 / 높이"가 설정되어 있지 않은지 확인하십시오. Safari는 svg의 글꼴 크기보다 크기 조정 우선 순위를 제공하지만 현재는 Chrome 및 FF는 그렇지 않은 것 같습니다.