Question

我正在开发一个在iPhone和各种Android手机上运行的网络应用程序。到目前为止，我使用过iUI framework。 iUI是专为iPhone 3设计的，并使用CSS中的像素来显示字体大小，行高等。但是在具有高像素密度（240 x 320像素，2.8英寸= 143dpi）的较新的三星I5500上，结果无法使用。所有元素都太小了。这可以在浏览器设置中部分补偿＆gt;缩放＆gt;关闭，但我不喜欢让用户更改他们的浏览器设置。

我的目标是，通过触摸它可以舒适地使用每个链接和每个按钮。为此，我想确保元素的最小物理尺寸。幸运的是，CSS 2.1规范提供了一种方法：min-height: 20mm或min-height: 0.8in。不幸的是，我忽略了那个声明。 iPhone 3GS上的元素尺寸为11mm，三星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%;
    }
}

对于Android

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

似乎有所帮助。它在具有高dpi的设备上扩大了页面，而不是在设备上低dpi。但元素的物理尺寸仍然不同。另见Android WebView。

Android DisplayMetrics文档及其密度与scaledDensity相比，带来了更多的模糊性而非澄清。

因此，到目前为止，我发现iPhone和Android的最佳组合是iUI plus以下HTML头部声明：

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

是否有现代，优雅的方式为各种移动设备设置字体大小和按钮宽度和高度？

您使用哪种解决方法？

Answer 1

我认为你的答案是使用EM单元而不是像素单元。

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

它是一种比例类型的单位。因此，您不是将字体和按钮的大小指定为修订号，而是指定该设备的默认字体的乘数。

无论如何，它是网站管理员无障碍的最佳实践，以及为什么大多数框架都是邪恶的！：d

CSS：适用于各种移动设备的字体大小，物理按钮高度

1 个答案: