web-dev-qa-db-ja.com

Bootstrap3グリフィコンの一部がphonegapで正しく表示されないAndroid webview

この添付のスクリーンショット をご覧ください。これは私のPhoneGapテストアプリです-GalaxyS4で撮影されました。

ベル、ブックマーク、ブリーフケース、カメラのアイコン（およびその他）が期待どおりに表示されないことがわかります。

これが私の観察です：

  1. すべてのアイコンは、PCとモバイルデバイスの両方のブラウザ（chrome、safari）で正しく表示できます
  2. すべてのアイコンは、iOS用の同じアプリで正しく表示できます（iphone/ipad、ios7でチェック済み）

「疑問符」はAndroidアプリでのみ表示されます。

誰かがその理由を知っていますか？

androidtwitter-bootstrapcordovatwitter-bootstrap-3glyphicons
20
Liu Xiaolu

エスケープシーケンスの問題です。 UTF-8でエンコードされたCSSファイルを確実に維持できる場合は、Bootstrapデフォルトをオーバーライドして、実際の非-エスケープされたグリフ。

（ブラウザーによっては、次のコードに多数のボックスが含まれているように見えます。ただし、コードをコピーしてUTF-8ドキュメントに貼り付けると、値が保持されます。）

@charset "UTF-8";

.glyphicon-bell:before {
  content: "????";
}
.glyphicon-bookmark:before {
  content: "????";
}
.glyphicon-briefcase:before {
  content: "????";
}
.glyphicon-calendar:before {
  content: "????";
}
.glyphicon-camera:before {
  content: "????";
}
.glyphicon-fire:before {
  content: "????";
}
.glyphicon-lock:before {
  content: "????";
}
.glyphicon-Paperclip:before {
  content: "????";
}
.glyphicon-pushpin:before {
  content: "????";
}
.glyphicon-wrench:before {
  content: "????";
}

この問題を回避するためにエスケープシーケンスを変更することもできますが、ブラウザのサポートは異なります。 Android/BlackBerryのみを対象としている場合は、以下が正常に機能するはずです。

.glyphicon-bell:before {
  content: "\d83d\dd14";
}
.glyphicon-bookmark:before {
  content: "\d83d\dd16";
}
.glyphicon-briefcase:before {
  content: "\d83d\dcbc";
}
.glyphicon-calendar:before {
  content: "\d83d\dcc5";
}
.glyphicon-camera:before {
  content: "\d83d\dcf7";
}
.glyphicon-fire:before {
  content: "\d83d\dd25";
}
.glyphicon-lock:before {
  content: "\d83d\dd12";
}
.glyphicon-Paperclip:before {
  content: "\d83d\dcce";
}
.glyphicon-pushpin:before {
  content: "\d83d\dccc";
}
.glyphicon-wrench:before {
  content: "\d83d\dd27";
}
25
Joe Liversedge

bootstrap min.cssファイルとグリフファイルのバージョンが一致していないことが原因である可能性があります。

0
Pushpendra