为什么自定义图标在手机上显示不正确？答案

【问题标题】：Why custom icons do not appear correct on mobile phones?为什么自定义图标在手机上显示不正确？
【发布时间】：2013-09-12 13:51:54
【问题描述】：

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

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

这是否与图标分辨率/视口元数据有关标签？我该如何解决这个问题？
如何使用 PhoneGap 为平台提供不同分辨率的图标。

在这里我找到了related question，但似乎没有解决。

【问题讨论】：

对于 Android，我知道它使用多个可绘制文件夹。每个文件夹将根据显示器的分辨率自动访问。如果您只使用一种尺寸的图片，可能会导致您的问题。
我正在使用 PhoneGap，因此我所有的资源都在 assest/* 目录中，这与原生 Android 开发不同，在原生 Android 开发中，我们会根据分辨率将资源放在 res 文件夹中，对此有什么想法吗？
看看Targeting Screens from Web Apps有没有帮助
你使用什么格式的图片？

标签： android iphone jquery-mobile icons viewport

【解决方案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;
  }
}

【讨论】：

谢谢，这是正确答案，现在有人可以奖励赏金吗？

【解决方案2】：

在 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" />

你可以试试！

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

这是一个漫长的过程，但可能值得验证您的图标尺寸是否符合预期。

【讨论】：