3

ツールを使用jQuery mobileしてアプリを開発しました。PhoneGap私のアイコンはすべてカスタムアイコンです。Web ブラウザで確認したところ、問題なく表示されていましたが、携帯電話 (Android と iPhone の両方) に公開すると、アイコンがおかしくなりました。

ここに画像の説明を入力

i の付いた情報アイコンは正常に見えますが、他のアイコン (左矢印、右矢印、ナビゲーション バーのアイコン) は間違っているように見えます。

  1. これはアイコンの解像度/viewport-meta タグと関係がありますか? この問題を解決するにはどうすればよいですか?
  2. PhoneGap を使用して、プラットフォームごとに異なる解像度のアイコンを提供するにはどうすればよいですか?

ここで関連する質問を見つけましたが、解決されていないようです。

4

4 に答える 4

1

ここで問題が発生しているかどうかはわかりませんが、次のリンクを参照する価値があるかもしれません: Creation and using custom icons in jQuery。

デバイスの画面解像度に応じて、18x18px と 36x36 の 2 つのサイズがあります。.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 Web サイトのこのページをご覧ください: 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

wxwidgets (クロスプラットフォームのシック クライアント フレームワーク) のツールバーの png ファイルなど、まったく異なるコンテキストで奇妙なバンディング/ストライプも見ました。

問題は、一部の画像ファイルが完全に正方形ではなかったり、ツールバーのフレームワークが期待する寸法でなかったりすることでした。それらがベクトル化され、メモリ ストリームとして取り込まれたとき、スクリーン ショットや関連する質問で見たようなものになりました。

それは大したことではありませんが、アイコンのサイズが期待どおりであることを確認する価値があるかもしれません。

于 2013-09-24T13:46:29.997 に答える