CODEWITHSUNDEEP
androidiphonejquery-mobileiconsviewport
Sushan Ghimire
Sushan Ghimire

Reputation: 7567

Why custom icons do not appear correct on mobile phones?

I've developed an app using jQuery mobile and PhoneGap tools. All of my icons are custom icons. When I checked on web browsers, all look fine but when I publish to mobile phones (both Android and iPhone), icons look weired.

enter image description here

The info icon with i looks fine, but the others (left, right arrows, nav-bar icons) looks wrong.

  1. Does this have anything to do with icon resolution / viewport-meta tags ? How can I solve this issue?
  2. How can I provide different resolutions of icons for platforms using PhoneGap.

Here I found a related question but not solved as it seems.

Upvotes: 3

Views: 576

Answers (4)

eb1
eb1

Reputation: 2947

I've also seen weird banding / stripes in a completely different context -- png files in a toolbar on wxwidgets (a cross-platform thick client framework).

The problem there was that some of my image files weren't completely square / weren't the dimensions that the toolbar framework expected. When they were vectorized and pulled in as a memory stream, they ended up looking kind of like what I'm seeing in your screen shot and on the related question.

It's a long shot, but it might be worth verifying that the dimensions for your icons match what is expected.

Upvotes: 0

Nikhil Desai
Nikhil Desai

Reputation: 1

Did you try using a 9-patch image? http://iphonedevlog.wordpress.com/2013/07/02/creating-and-installing-a-splash-screen-for-android-using-eclipse-and-phonegap/

Upvotes: 0

eb1
eb1

Reputation: 2947

I'm not sure if this is where you're running into problems, but it might be worth taking a look at this link: Creating and using custom icons in jQuery.

There should be two sizes depending on the screen resolution of the device, one at 18x18px and the other at 36x36. The .css tells the device which icon to serve up by using -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/[email protected]") no-repeat scroll 0 0 rgba(0, 0, 0, 0.4) !important;
      background-size: 18px 18px;
  }
}

Upvotes: 1

Yoann Hercouet
Yoann Hercouet

Reputation: 17996

Have a look to this page on the phonegap website: http://build.phonegap.com/docs/config-xml

They explain a lot of points, the interesting part for you is in the chapter "Other Useful Elements" where they explain how to integrate icons for Android:

We support ldpi, mdpi, hdpi, and xhdpi displays; the following will define icons for each specific screen type.

And the code example provided for every density:

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

You can have a try!

Upvotes: 0

Related Questions