2

我正在开发一个带有 phonegap 和像素密度的 Android 应用程序是一个问题。我使用 4.0" 屏幕开发了这个应用程序，它是 320 像素 x 480 像素。显然一切都很好，元素的大小使用 css 中的像素单位。

有人告诉我 CSS 中的像素只是一个单位，并且在高密度屏幕上会发生变化。但是我在朋友的 4.0 英寸手机上测试了该应用程序。他的手机是 480 像素 x 800 像素。屏幕分辨率更高。但是应用程序中的所有内容都很小，按钮太小而无法点击。

所以我的问题是如何最好地处理这个问题。我可以在 Android 清单中使用哪些设置？或者我应该更改 CSS 中的单位（这可能需要一段时间）。

使用 html 和 css 驱动的 Android 应用程序处理这种情况的标准方法是什么？

如果它有帮助，我正在使用 jquery mobile，有很多被覆盖的样式。

4

3 回答 3

1

您还可以根据设备显示分辨率从显示独立单位（例如 dp 或 sp）转换为像素，然后在使用所得像素宽度的 WebView 样式表中使用 CSS。上一篇文章介绍了如何在像素和 sp 单位之间进行转换。你可以对 dp 做同样的事情。

这使您可以为按钮、文本、表格列宽等选择 dp 或 sp 单位，并让 WebView 以独立于显示分辨率的一致大小呈现这些。

因此，例如，您的 HTML 的头部可能是

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>This is my title</title>
        <style type="text/css">
            p { font-size: 20px;  }
        </style>

并且，您可以在运行时根据显示分辨率计算像素大小，而不是硬编码 20px。

于 2013-07-25T13:06:43.180 回答
1

使用媒体查询和/或使用百分比值而不是固定像素值。查看这篇关于响应式设计的文章http://alistapart.com/article/responsive-web-design

于 2013-07-25T12:28:15.947 回答
0

您可以使用媒体查询

检查以下链接以开始

http://www.andreasnorman.com/css-media-queries-for-mobile-devices/

http://css-tricks.com/css-media-queries/

于 2013-07-25T12:14:17.573 回答