CSS：字體大小，各種移動設備的物理按鈕高度

我正在研究在iPhone和各種Android手機上運行的Web應用程序。到目前爲止，我已經使用了iUI framework。 iUI是爲iPhone 3設計的，它使用CSS中的像素來顯示字體大小，線條高度等。但是，結果對於具有高像素密度（240 x 320像素，2.8英寸= 143dpi）的較新型三星I5500無法使用。所有元素都太小。這可以在瀏覽器設置>縮放>關閉中得到部分補償，但我不喜歡讓用戶更改瀏覽器設置。CSS：字體大小，各種移動設備的物理按鈕高度

我的目標是，每個鏈接和每個按鈕都可以通過觸摸來舒適地使用。爲此，我想確保元素的最小物理尺寸。幸運的是，CSS 2.1規範爲此提供了一種方法：min-height: 20mm或min-height: 0.8in。不幸的是，我所有的手機都忽略了這個聲明。在iPhone 3GS上，元素尺寸爲11毫米，三星I5500（Andorid 2.1）爲10毫米，HTC Wildfire低分辨率顯示屏（Android 2.2）尺寸爲14毫米。看起來像WebKit瀏覽器假設像96dpi這樣的低分辨率渲染元素幾乎不可讀，並且幾乎不能在高分辨率手機顯示器上點擊。

這個blog post at sencha提供了一些解決方案，建議設置按鈕，鏈接，列表項目的所有大小，並通過某種瀏覽器嗅探來移動body的大小。

他們還提到CSS3媒體查詢，但說，它目前不工作：

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

對於Android的

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

似乎幫助。它使用高dpi來擴大設備上的頁面，而不是使用低dpi的設備。但元素的物理尺寸仍然不同。另見Android WebView。

Android DisplayMetrics其密度與scaledDensity的文檔帶來了比澄清更多的模糊性。

所以我迄今發現的iPhone和Android的最佳組合是iUI的加HTML頭以下聲明：

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

是否有一個現代，優雅的方式來設置字體大小和按鈕的寬度和高度適用於各種移動設備？

或者您使用哪種解決方法？

來源

2011-04-06 geekQ

我認爲你的答案是使用EM單元而不是像素單元。

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

它是一種proportionnal類型的單元。這樣您就不會將字體和按鈕的大小指定爲固定編號，而是將該字體和按鈕的大小指定爲該設備的默認字體的乘數。

無論如何這是網站管理員無障礙的最佳實踐，以及爲什麼大多數框架都是邪惡的！：D

來源

2011-04-06 08:45:19 Yahel

雖然我喜歡em單元添加的間接性思想，但它並不回答我的問題。從移動設備到移動設備的默認字體會有很大差異，並且依靠它會使UI元素太小而不能觸摸它們，或者太大（不適合顯示器）。對我來說，「無障礙」意味着我的應用程序可以由長指甲的女性操作;-)，而不是w3c規範的20年可訪問性概念，僅適用於視覺受損的用戶。 – geekQ 2011-04-06 09:27:48

CSS：字體大小，各種移動設備的物理按鈕高度

回答

相關問題