CSS : 글꼴 크기, 다양한 휴대 기기의 실제 버튼 높이

Question

iPhone 및 다양한 Android 휴대 전화에서 실행되는 웹 응용 프로그램에서 작업하고 있습니다. 지금까지 iUI framework을 사용했습니다. iUI는 iPhone 3 용으로 설계되었으며 CSS의 픽셀을 글꼴 크기, 선 높이 등으로 사용합니다. 그러나 결과는 높은 픽셀 밀도 (240 x 320 픽셀, 2.8 인치 = 143dpi)를 가진 최신 Samsung I5500에서는 사용할 수 없습니다. 모든 요소가 너무 작습니다. 이것은 브라우저 설정> 확대/축소> 닫기에서 부분적으로 보완 될 수 있지만 사용자가 브라우저 설정을 변경하는 것을 좋아하지 않습니다.

내 목표는 모든 링크와 모든 버튼을 터치하여 편안하게 사용할 수 있다는 것입니다. 이를 위해 최소한의 물리적 크기를 보장하고자합니다. 다행히도 CSS 2.1 사양은 그 방법을 제공합니다 : min-height: 20mm 또는 min-height: 0.8in. 불행히도 모든 전화는 그 선언을 무시합니다. iPhone 3GS에서 요소의 크기는 11mm이며, Samsung I5500 (Andorid 2.1)은 10mm이며, HTC Wildfire는 낮은 해상도의 디스플레이 (Android 2.2)에서 14mm 크기입니다. WebKit 브라우저는 96dpi와 같은 저해상도를 사용하여 고해상도 휴대 전화 디스플레이에서 요소를 거의 읽을 수 없으며 간신히 클릭 할 수 있다고 가정합니다.

이 blog post at sencha은 버튼, 링크, 목록 항목의 모든 크기를 설정하고 body의 크기를 브라우저 스니핑과 관련하여 한 번씩 이동하도록 권장하는 몇 가지 해결책을 제공합니다.

그들은 또한 현재 작동하지 않습니다, CSS3 미디어 쿼리를 언급하지만, 말씀 :

@media screen and (min-resolution: 160dpi) { 
    body { 
     font-size: 114%; 
    } 
} 

<meta name="viewport" content="target-densitydpi=low-dpi" /> 

안드로이드

을 위해 도움이 보인다. 낮은 dpi의 기기 에있는 것보다 high-dpi가 많은 기기의 페이지를 확대합니다. 그러나 요소의 물리적 크기는 여전히 다릅니다. Android WebView도 참조하십시오.

밀도 대 scaledDensity가있는 Android DisplayMetrics 문서는 설명보다 흐릿하게 나타납니다.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;target-densitydpi=low-dpi;"/> 

글꼴 크기와 버튼의 폭과 높이를 설정하는 현대, 우아한 방법이 있나요 :

그래서 내가 아이폰과 안드로이드에 대한 지금까지 발견 된 가장 좋은 조합은 iUI는 플러스 HTML 헤드에 다음과 같은 선언입니다 다양한 모바일 장치에 적합합니까?

또는 어떤 해결 방법을 사용합니까?

Answer 1

나는 픽셀 단위 대신에 EM 단위가 사용된다고 생각합니다.

http://www.w3.org/WAI/GL/css2em.htm

그것은 유닛의 proportionnal 유형이다. 따라서 폰트와 버튼의 크기를 수정 번호로 지정하지 않고 해당 장치의 기본 글꼴에 대한 멀티 플라이 케이터로 지정하십시오.

어쨌든 접근성을위한 웹 마스터의 모범 사례이며 왜 대부분의 프레임 워크가 악한 지요 !! : D