텍스트가 일관성 없이 렌더링되고 일부 글꼴이 다른 글꼴보다 큰 Mobile Safari(iPhone)의 글꼴 크기 문제를 수정하시겠습니까?

텍스트가 일관성 없이 렌더링되고 일부 글꼴이 다른 글꼴보다 큰 Mobile Safari(iPhone)의 글꼴 크기 문제를 수정하시겠습니까?

저희 사이트는 모바일 Safari에서 글꼴 크기가 일정하지 않게 렌더링됩니다. 그리고 저희가 아는 한 모바일 Safari만 렌더링됩니다.이것은 우리를 매우 당황하게 했습니다.

우리는 Firebug로 사이트를 분석했고, 잘못된 영역은 올바른 스타일을 상속받고 있지만 글꼴은 여전히 잘못된 크기로 렌더링됩니다.

http://www.panabee.com 을 방문하세요.

도메인 이름 검색을 수행합니다.

왼쪽 상자에는 잘못된 글꼴 크기가 표시됩니다.글꼴 크기는 오른쪽의 글꼴 크기(상자 제목과 상자 복사본 모두)와 일치해야 합니다.예를 들어, "변주곡"과 "트위터"라는 제목은 "대체 엔딩"이라는 제목보다 훨씬 큽니다.

이유를 알 수 있을까요?

Mobile Safari(Android용 Chrome, Mobile Firefox 및 IE Mobile)는 와이드 블록의 글꼴 크기를 늘려서 해당 블록을 두 번 눌러 확대하면(화면 너비에 맞는 블록) 텍스트를 읽을 수 있습니다.설정하는 경우-webkit-text-size-adjust: 100%(또는)none), 이렇게 할 수 없기 때문에 사용자가 와이드 블록을 확대하기 위해 더블 탭을 할 때 텍스트는 읽기 어려울 정도로 작아집니다. 핀치인을 하면 텍스트를 읽을 수 있지만, 그러면 텍스트가 화면보다 넓어지고 각 텍스트 행을 읽기 위해 수평으로 이동해야 합니다!

1. 이상적인 방법은 반응형 웹 디자인 기법을 사용하여 디자인을 모바일 화면 크기에 맞게 조정하는 것입니다(이 경우에는 더 이상 매우 넓은 블록이 없으므로 모바일 브라우저가 더 이상 글꼴 크기를 조정하지 않음).

2. 이 옵션이 아닌 경우 모바일 사용자에게 데스크톱 사이트를 제공해야 하는 경우 텍스트 블록이 모바일 장치의 장치 너비(예: 많은 세로 전화기의 경우 320px)보다 넓지 않도록 설계를 조정할 수 있는지 확인하십시오(데스크톱 브라우저에 영향을 주지 않도록 모바일 전용 CSS를 사용할 수 있음).글꼴 크기(그리고 Android Browser 및 Opera Mobile과 같이 텍스트를 리플로 하는 브라우저도 레이아웃을 변경할 필요가 없습니다.)

3. 마지막으로 Mobile Safari가 글꼴 크기를 조정하지 못하게 해야 하는 경우 설정할 수 있습니다.-webkit-text-size-adjust: 100%그러나 이것은 모바일 사용자가 텍스트를 읽는 데 어려움을 겪을 수 있기 때문에 마지막 수단으로만 사용하십시오. 텍스트가 너무 작거나 읽을 때마다 좌우로 이동해야 하기 때문입니다.다음을 사용해야 합니다.100%것은 아니다.none데스크톱 브라우저에 나쁜 부작용이 없기 때문입니다.동등한 것들도 있습니다.-moz-text-size-adjust그리고.-ms-text-size-adjustMobile Firefox 및 IE Mobile의 속성입니다.

편집: 예를 들어, 당신의 경우 가장 간단한 것은 아마도 두 번째 대안일 것이므로, 당신은 다음 CSS를 추가해 볼 수 있습니다.

/* Mobile browsers only */
@media only screen and (max-device-width: 480px) {
    table#all_results {
        width: auto;
    }
    td#main_box {
        width: 320px;
    }
    td#side_box {
        width: 320px;
    }
}

이렇게 320px를 하드코딩하는 것은 이상적이지 않지만 다양한 CSS 미디어 쿼리를 사용하거나 JavaScript에서 장치 너비를 얻음으로써 개선할 수 있습니다.

다음은 궁극적으로 효과가 있었습니다(iPhone 4에서만 테스트됨).

/* Mobile browsers only */
@media only screen and (max-device-width: 480px) {      
        td#main_box { -webkit-text-size-adjust:100% }               
}

우리는 존의 해결책이 이것의 기초였기 때문에 그에게 답을 주었습니다.

아마도 가장 우아한 대답은 아니지만, 효과가 있습니다.

-webkit-text-size-adjust: none;모바일 장치를 확대할 수 없습니다.당신은 야합다니해를 사용해야 .100%대신.

-webkit-text-size-adjust:none;

아마 당신의 문제를 해결할 것입니다.

target-element { -webkit-text-size-adjust:80% } 

계속 확대되지만 웹킷 기본값보다 80% 작은 크기로 유지됩니다.

저 같은 경우에는.<p>요소와 저는 다음을 추가하여 이 문제를 해결했습니다.

width: fit-content;

거기까지. 사파리 모바일에서도 이걸 재현할 수 있었어요.

IOS 앱과 IOS 사파리 브라우저용 css hack을 사용하여 글꼴 크기 문제를 해결했습니다.

@supports (-webkit-touch-callout: none) {
       //you can write your custom css for IOS safari browser.
     }

언급URL : https://stackoverflow.com/questions/5303263/fix-font-size-issue-on-mobile-safari-iphone-where-text-is-rendered-inconsisten