Question

我正在使用一个看起来像本机应用程序的phonegab框架中的webapp。我遇到的问题是我不知道如何调整到不同的手机/屏幕尺寸。我想为不同的手机/屏幕尺寸自定义应用程序，以防止元素掉出屏幕，并使图像和文本的大小合适，以适应手机的屏幕尺寸。

我以为我找到了解决方案，但似乎没有用。下面的CSS代码是我如何处理的一个例子。通过'@media screen和（max-device-height：.. px）和（orientation：portrait）'我试图改变图像的大小和元素之间的距离，以获得最流行的屏幕尺寸。我首先通过调整桌面上的浏览器屏幕来测试它，它似乎工作正常。当我增加或减少浏览器时，元素之间的距离和图像的大小发生了变化。但我用它测试的手机（htc wildfire和samsung gt-i5800）似乎对这些代码没有反应。 Htc野火的屏幕尺寸为240x320但不响应我在此标签后面的代码“@ media screen and（max-device-height：320px）和（orientation：portrait）。

[编辑：htc野火响应'@ media screen和（max-device-height：480px）和（orientation：portrait）。而三星gt-i5800响应'@ media screen和（max-device-height：533px）和（orientation：portrait）。因此，两款手机的显示高度均不同于手机响应的媒体标签中的“max-device-height”。

谁能告诉我我做错了什么或知道更好的方法？谢谢！

（抱歉我的英语不好）

.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 作者写下了手机，它们的设备宽度不同：

“这个标签最容易解释。为了让人们能够将自己的内容放在iPhone屏幕上，Apple已经故意发明了它。并且已经将它推向开发者。这意味着它无法承受现在更改标签读出的设备宽度。

事实上，Nexus One已经开辟了苹果追随的道路。它的官方屏幕宽度（纵向模式）是480px，但是当你应用标签时，它就好像屏幕宽度是320px，官方宽度的2 / 3rds

这让我有些烦恼。我这里有同样的问题吗？这是个常见的问题吗？有没有一个很好的解决方法？]

webapp适用于不同的手机/屏幕尺寸

0 个答案: