Question

我正在开发一款带有手机屏幕和像素密度的Android应用程序。我使用4.0英寸屏幕开发了应用程序，该屏幕为320像素×480像素。显然一切都很好，元素的大小使用css中的像素单位。

有人告诉我，CSS中的像素只是一个单位而且在高密度屏幕上有所改变。然而，我在朋友4.0“手机上测试了这款应用程序。他的手机是480px×800px。屏幕分辨率更高。但是应用程序中的所有内容都很小，按钮太小而无法点击。

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

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

如果它有助于我使用jquery mobile，有很多覆盖样式。

Answer 1

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

Answer 2

您还可以根据设备显示分辨率将与显示无关的单位（例如dp或sp）转换为像素，然后在使用结果像素宽度的WebView样式表中使用CSS。上一篇文章介绍了如何在pixel and sp units之间进行转换。你也可以为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，而是根据显示分辨率在运行时计算像素大小。

Answer 3

您可以使用媒体查询

检查以下链接以开始使用

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

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

CSS Elements在更高密度的屏幕上改变物理尺寸

3 个答案: