3

我已经使用jQuery mobile和PhoneGap工具开发了一个应用程序。我所有的图标都是自定义图标。当我检查网络浏览器时，一切看起来都很好，但是当我发布到手机（Android 和 iPhone）时，图标看起来很奇怪。

在此处输入图像描述

带有 i 的信息图标看起来不错，但其他（左、右箭头、导航栏图标）看起来不对。

  1. 这与图标分辨率/视口元标签有什么关系吗？我该如何解决这个问题？
  2. 如何为使用 PhoneGap 的平台提供不同分辨率的图标。

在这里，我发现了一个相关的问题，但似乎没有解决。

4

4 回答 4

1

我不确定这是否是您遇到问题的地方，但可能值得看看这个链接：Creating and using custom icons in jQuery。

根据设备的屏幕分辨率，应该有两种尺寸，一种为 18x18 像素，另一种为 36x36。.css 使用 -webkit-min-device-pixel-ratio 告诉设备要提供哪个图标：

.ui-icon-happy {
    -moz-border-radius: 9px 9px 9px 9px;
    background: url("../img/happy.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0.4) !important;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .ui-icon-happy {
      -moz-border-radius: 9px 9px 9px 9px;
      background: url("../img/happy@2x.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0.4) !important;
      background-size: 18px 18px;
  }
}
于 2013-09-17T20:52:43.630 回答
0

在 phonegap 网站上查看此页面：http: //build.phonegap.com/docs/config-xml

他们解释了很多要点，对您来说有趣的部分是在“其他有用的元素”一章中，他们解释了如何为 Android 集成图标：

我们支持 ldpi、mdpi、hdpi 和 xhdpi 显示；下面将定义每个特定屏幕类型的图标。

以及为每个密度提供的代码示例：

<icon src="icons/android/ldpi.png" gap:platform="android" gap:density="ldpi" />
<icon src="icons/android/mdpi.png" gap:platform="android" gap:density="mdpi" />
<icon src="icons/android/hdpi.png" gap:platform="android" gap:density="hdpi" />
<icon src="icons/android/xhdpi.png" gap:platform="android" gap:density="xhdpi" />

你可以试一试！

于 2013-09-17T13:05:57.490 回答
0

您是否尝试使用 9-patch 图像？http://iphonedevlog.wordpress.com/2013/07/02/creating-and-installing-a-splash-screen-for-android-using-eclipse-and-phonegap/

于 2013-09-22T07:06:20.360 回答
0

我还在完全不同的环境中看到了奇怪的条带/条纹——wxwidgets（一个跨平台的胖客户端框架）工具栏中的 png 文件。

问题是我的一些图像文件不是完全正方形/不是工具栏框架预期的尺寸。当它们被矢量化并作为内存流拉入时，它们最终看起来有点像我在您的屏幕截图和相关问题中看到的那样。

这是一个很长的镜头，但可能值得验证图标的尺寸是否符合预期。

于 2013-09-24T13:46:29.997 回答