텍스트가 일관성없이 렌더링되고 일부 글꼴이 다른 글꼴보다 큰 모바일 Safari (iPhone)의 글꼴 크기 문제를 해결합니까?
우리 사이트는 모바일 Safari에서 일관되지 않은 글꼴 크기로 렌더링되며 우리가 알 수있는 한 Mobile Safari 만 렌더링됩니다. 이것은 우리를 매우 어렵게 만들었다.
Firebug로 사이트를 분석 한 결과 잘못된 영역이 올바른 스타일을 상속 받았지만 글꼴은 여전히 잘못된 크기로 렌더링됩니다.
1) http://www.panabee.com을 방문 하십시오 .
2) 도메인 이름을 검색합니다.
왼쪽 상자에 잘못된 글꼴 크기가 표시됩니다. 글꼴 크기는 오른쪽의 글꼴 크기와 일치해야합니다 (상자 제목 및 상자 사본 모두). 예를 들어, "변형"및 "Twitter"라는 제목은 "대체 결말"이라는 제목보다 훨씬 큽니다.
이유는 무엇입니까?
모바일 Safari (예 : Android 용 Chrome, Mobile Firefox 및 IE Mobile)는 넓은 블록의 글꼴 크기를 늘려서 (항상) 해당 블록을 두 번 탭하여 확대하면 해당 블록을 화면 너비에 맞 춥니 다. , 텍스트를 읽을 수 있습니다. 설정 -webkit-text-size-adjust: 100%(또는 none)하면이 작업을 수행 할 수 없으므로 사용자가 넓은 블록을 확대하기 위해 두 번 탭하면 텍스트가 읽을 수 없을 정도로 작아집니다. 사용자는 핀치 줌 인하면 읽을 수 있지만 텍스트가 화면보다 넓어지고 각 텍스트 줄을 읽으려면 가로로 이동해야합니다!
이상적으로는 반응 형 웹 디자인 기술을 사용하여 디자인을 모바일 화면 크기에 맞게 수정하는 것이 좋습니다 (이 경우에는 더 이상 매우 넓은 블록이 없어 모바일 브라우저가 더 이상 글꼴 크기를 조정하지 않음).
이것이 옵션이 아니고 모바일 사용자에게 데스크톱 사이트를 제공하는 데 어려움을 겪고 있다면 텍스트 블록이 모바일 장치의 장치 너비보다 더 넓지 않도록 디자인을 조정할 수 있는지 확인하십시오 (예 : 많은 세로 휴대폰의 경우 320px). ) (모바일 전용 CSS를 사용하여 데스크톱 브라우저에 영향을주지 않도록 할 수 있음) 모바일 Safari는 글꼴 크기를 늘릴 필요가 없습니다 (그리고 Android 브라우저 및 Opera Mobile과 같이 텍스트를 리플 로우하는 브라우저도 변경할 필요가 없습니다. 레이아웃).
당신은 마지막 경우 정말 설정할 수 지정 크기 글꼴을 조정에서 모바일 사파리를 방지하기 위해 필요
-webkit-text-size-adjust: 100%하지만, 이렇게 최후의 수단으로 만 그 중 하나 너무 작거나 것대로, 모바일 사용자가 텍스트를 읽는 어려움이 발생할 가능성이 있기 때문에 읽은 줄마다 좌우로 이동해야합니다. 데스크톱 브라우저에서 불쾌한 부작용이 없기 때문에100%not 을 사용해야 합니다 . Mobile Firefox 및 IE Mobile에 대한 동등 및 속성 도 있습니다 .none-moz-text-size-adjust-ms-text-size-adjust
편집 : 예를 들어 귀하의 경우 가장 간단한 것이 아마도 두 번째 대안 일 것이므로 다음 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 미디어 쿼리를 사용하거나 자바 스크립트에서 장치 너비를 가져 와서이를 개선 할 수 있습니다.
궁극적으로 효과가 있었던 것은 다음과 같습니다 (iPhone 4에서만 테스트 됨).
/* Mobile browsers only */
@media only screen and (max-device-width: 480px) {
td#main_box { -webkit-text-size-adjust:100% }
}
그의 솔루션이이 솔루션의 기반이 되었기 때문에 우리는 John에게 답변을 수여했습니다.
아마도 가장 우아한 대답은 아니지만 작동합니다.
-webkit-text-size-adjust: none;모바일 장치를 확대 할 수 없게됩니다. 100%대신 사용해야 합니다.
-webkit-text-size-adjust:none;
아마 당신의 문제를 해결할 것입니다.
target-element { -webkit-text-size-adjust:80% }
여전히 확대 / 축소되지만 웹킷 기본값보다 80 % 작게 유지합니다.
제 경우에는 <p>요소 가 있었고 다음을 추가하여이 문제를 해결했습니다.
width: fit-content;
그것에. 사파리 모바일에서도 재현 할 수있었습니다.
'program story' 카테고리의 다른 글
| virtualenv 또는 빌드 아웃을 사용하여 PIL을 설치하는 문제 (0) | 2020.10.31 |
|---|---|
| 전역 변수가 나쁘다고 들었습니다. 어떤 대체 솔루션을 사용해야합니까? (0) | 2020.10.31 |
| while 루프를 사용하는 것보다 파이썬에서 range ()를 반복하는 것이 왜 더 빠릅니까? (0) | 2020.10.31 |
| 날짜가 yyyy-dd-MM 형식 인 DateTime.TryParse 문제 (0) | 2020.10.31 |
| Elasticsearch 2.0에서 원격 액세스 / 요청을 활성화하려면 어떻게해야합니까? (0) | 2020.10.31 |