2016-09-29 6 views
0

내 아이폰에서 멋져 보이는 jquery 웹 앱이 있습니다. 방금 다른 사람의 iPhone에서 살펴 봤는데 굵은 글씨이 접근성 기능을 사용하도록 설정했습니다. 이 문제는 버튼의 많은 텍스트가 오버플로된다는 것입니다. 예를 들어, 버튼의 "확인"보다는 "Co ..."라는 메시지가 표시됩니다. 이는 쓸모가 없습니다. 이것은 회사 내부 웹 앱이므로 iPhone에서만 실행하면됩니다.모바일 Safari의 jquery 버튼에 텍스트 오버플로

아이디어가 있습니까?

+0

이'오버 플로우를 제거합니다. – aardrian

답변

1

CSS 요소 크기 조정에서 상대 단위 (em, rem)를 사용하면이 문제를 방지 할 수 있습니다. 또한 넘치는 텍스트가 잘릴 수 있으므로 요소에 설정된 폭을 사용하지 마십시오.

WCAG AA 기준에 따르면 콘텐츠 나 기능을 손실하지 않고 텍스트의 크기를 200 %까지 조정할 수 있어야하므로 텍스트가 늘어남에 따라 버튼이 커지도록하는 것이 중요합니다. 버튼에있을 수있는 모든 너비를 제거 할 수 있습니다. 그렇지 않으면 그 안의 텍스트에 상대적으로 확장되어야합니다. WCAG 기준에

출처 : hidden` 또는 버튼 상당 : https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html

+0

@Skerrvy에게 감사드립니다. 그건 훌륭한 충고이지만, 모든 텍스트를 렌더링하기 위해 jQuery를 라이브러리로 사용하고 있기 때문에이를 구현하는 방법을 모르겠습니다. 저를 올바른 방향으로 가르쳐 주시겠습니까? 건배 – Brad

+0

이 두드러진 점은 글꼴 크기를 늘릴 때 높이/너비를 설정하면 텍스트가 잘리지 않는 이유입니다 ( ).이 두 번째 링크는 첫 번째 지점을 보여줍니다. (상대 단위를 사용하여) 크기를 지정하므로 페이지를 확대 할 때 요소가 모두 같은 비율로 조정됩니다. https://jsfiddle.net/ym1nb48u/4/ – Skerrvy