0

我注意到 phonegap 中的 JQuery Mobile 在 iphone 上运行良好。但是，当我在 android 上运行类似的应用程序时，尤其是 Ldpi(320X240)，它无法正常工作。按钮等图像是像素化的。对此的任何帮助都非常感谢。

感谢广告

4

1 回答 1

1

在 android 应用程序中，您可以为每个屏幕密度提供多个位图res/drawable-ldpi res/drawable-hdpi，等等...

但它在这里不起作用，因为 phonegap 将从资产文件夹加载位图。但是您可以使用 css3 媒体查询完全像 android 在您的网页中所做的那样。

例子：

  • 对于 100 像素的图像，将其命名为 btn-mdpi.png，
  • 创建一个 75px 的图像，命名为 btn-ldpi.png，
  • 创建一个 150px 的图像，命名为 btn-hdpi.png，
  • 然后创建一个 200px 的图像，命名为 btn-xhdpi.png

这是<head>您的网页：

<head>
  <meta name="viewport" content="width=device-width, target-densitydpi=device-dpi">
  <style>
    input {
        background: transparent url(btn-mdpi.png);
        height: 100px;
    }

    @media screen and (-webkit-max-device-pixel-ratio:0.75) {
        input {
        background: transparent url(assets/btn-ldpi.png);
        height: 75px;
        }
    }
    @media screen and (-webkit-max-device-pixel-ratio:1.0) {
        input {
        background: transparent url(assets/btn-mdpi.png);
        height: 100px;
        }
    }
    @media screen and (-webkit-max-device-pixel-ratio:1.5) {
        input {
        background: transparent url(assets/btn-hdpi.png);
        height: 150px;
        }
    }
    @media screen and (-webkit-max-device-pixel-ratio:2.0) {
        input {
        background: transparent url(assets/btn-xhpi.png);
        height: 200px;
        }
    }
  </style>
</head>

对于每个密度，将使用与屏幕密度匹配的不同位图。好消息它也适用于 iphone 4+ 及其视网膜显示屏！

您可以阅读这篇旧的 romain nurik 帖子以了解更多信息：http ://designbycode.tumblr.com/post/1127120282/pixel-perfect-android-web-ui

于 2012-10-17T15:55:07.513 回答