디자인이 휴대기기에 표시될 때 버튼이나 링크와 같은 상호작용 요소가 충분히 큰지, 주변에 충분한 공간이 있어야 합니다. 다른 요소와 겹치지 않고 쉽게 누를 수 있습니다. 이는 모든 사용자에게 이익이 됩니다. 특히 운동 장애가 있는 사람에게 도움이 됩니다
최소 권장 터치 영역 크기는 기기 독립적 픽셀 약 48픽셀입니다. 광고가 표시될 수 있습니다. 예를 들어 아이콘은 너비와 높이가 24픽셀에 불과할 수 있지만 추가 패딩을 사용하여 탭 타겟 크기를 최대 48픽셀로 설정할 수 있습니다. 48x48픽셀 영역은 약 9mm에 해당하며, 이는 사람의 손가락 패드 영역 크기와 비슷합니다.
데모에서는 모든 링크가 최소 크기를 충족하도록 패딩을 추가했습니다.
또한 터치 영역 사이의 간격은 약 8픽셀이어야 하며, 가로와 세로 모두 이렇게 하면 사용자가 손가락으로 한 탭 타겟을 누를 때 실수로 다른 탭 타겟에 터치되지 않습니다.
터치 영역 테스트
타겟이 텍스트이고 em 또는 rem과 같은 상대 값을 사용하여 텍스트와 패딩의 크기를 조절한 경우
DevTools를 사용하여 해당 영역의 계산된 값이 충분히 큰지 확인할 수 있습니다.
아래 예에서는 텍스트와 패딩으로 em를 사용합니다.
링크의 a를 검사합니다.
Chrome DevTools에서 Computed 창으로 전환하면 상자의 다양한 부분을 검사할 수 있습니다.
어떤 픽셀 크기로 확인되는지 확인할 수 있습니다.
Firefox DevTools에는 레이아웃 패널이 있습니다.
이 패널에서 검사된 요소의 실제 크기를 가져옵니다.
미디어 쿼리를 사용하여 터치스크린 사용 감지
단순히 표시 영역 크기를 테스트하고 휴대전화나 태블릿이 될 가능성이 크다는 것을 알게 되었습니다. 터치 스크린을 사용할 경우, 이제 더 강력한 화면 조정 방법이 제공됩니다. 설계할 수 있습니다.
이제 미디어 쿼리로 테스트할 수 있는 미디어 기능 중 하나는
사용자의 기본 입력이 터치스크린 (pointer)인지 여부
현재 감지된 입력 중 하나라도 터치 스크린 (any-pointer)인지 여부입니다.
pointer 및 any-pointer 기능은 fine 또는 coarse를 반환합니다.
미세 포인터는 마우스나 트랙패드를 사용하는 사람이고
해당 마우스가 블루투스를 통해 휴대폰에 연결되어 있더라도 해당될 수 있습니다.
coarse 포인터는 터치스크린을 나타냅니다.
휴대기기가 될 수 있지만 노트북 화면이나 대형 태블릿일 수도 있습니다.
미디어 쿼리 내에서 CSS를 조정하여 터치 영역을 늘리려는 경우 거친 포인터를 테스트하면 모든 터치스크린 사용자의 탭 타겟을 늘릴 수 있습니다. 이렇게 하면 기기가 휴대전화이든 대형 기기이든 탭 영역이 더 넓어집니다.
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
포인터와 같은 상호작용 미디어 기능에 관해 자세히 알아볼 수 있습니다. 자세한 내용은 반응형 웹 디자인 기본사항을 참조하세요.