我正在开发一个必须看起来像本机应用程序的 phonegab 框架中的 web 应用程序。我遇到的问题是我不知道如何适应不同的手机/屏幕尺寸。我想为不同的手机/屏幕尺寸定制应用程序，以防止元素从屏幕上掉出来，并为图像和文本提供合适的尺寸以适应手机的屏幕尺寸。
我以为我找到了解决方案，但它似乎不起作用。下面的 CSS 代码是我如何处理的一个示例。通过'@media screen and (max-device-height: ..px) and (orientation: portrait)'，我试图改变图像的大小和元素之间的距离，以适应最流行的屏幕尺寸。我首先通过调整桌面上的浏览器屏幕大小对其进行了测试，它似乎工作正常。当我增加或减少浏览器时，元素之间的距离和图像的大小会发生变化。但是我测试过的手机（htc wildfire 和 samsung gt-i5800）似乎对这些代码没有反应。Htc 野火的屏幕尺寸为 240x320，但不响应我放在此标签后面的代码“@ media screen and (max-device-height: 320px) and (orientation: portrait)。
[编辑：htc 野火确实响应'@媒体屏幕和（最大设备高度：480px）和（方向：纵向）。三星 gt-i5800 响应'@媒体屏幕和（最大设备高度：533px）和（方向：纵向）。因此，这两款手机的显示高度都与手机响应的媒体标签中的“最大设备高度”不同]
谁能告诉我我做错了什么或知道更好的方法？谢谢！
（对不起，我的英语不好）
.Header {padding-top:20px}
.buttons {padding-top:5px}
.welcomeImg {padding-top:20px;padding-left:8px;width:250px;}
@media screen and (max-device-height: 685px) and (orientation: portrait){
.Header {padding-top:35px}
.buttons{padding-top:20px}
.welcomeImg {padding-top:40px;width:260px;}}
@media screen and (max-device-height: 533px) and (orientation: portrait){
.Header {padding-top:30px}
.buttons {padding-top:15px}
.welcomeImg {padding-top:35px;width:250px;}}
@media screen and (max-device-height: 480px) and (orientation: portrait){
.Header {padding-top:17px}
.buttons {padding-top:2px}
.welcomeImg {padding-top:22px;width:250px;}}
@media screen and (max-device-height: 400px) and (orientation: portrait){
.Header {padding-top:24px}
.buttons {padding-top:0px}
.welcomeImg {padding-top:25px;width:180px;} }
@media screen and (max-device-height: 320px) and (orientation: portrait){
.Header {padding-top:17px}
.buttons {padding-top:0px}
.welcomeImg {padding-top:18px;width:130px;}}
[编辑：我在这里读到这篇文章： http ://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html 作者写了关于手机的行为就像他们有不同的设备宽度：
“这个标签最容易解释。Apple 故意发明它，正是为了让人们可以将他们的内容适应 iPhone 屏幕，并与开发人员一起推动它。这意味着它无法更改设备宽度为 read现在按标签。
事实上，Nexus One 已经为苹果开辟了一条可以效仿的道路。它的官方屏幕宽度（纵向模式）是480px，但是当你应用标签时它就像屏幕宽度是320px，是官方宽度的2/3”
这给我留下了一些问题。我在这里有同样的问题吗？这是个常见的问题吗？有没有好的解决方法？]