android - Nexus 10 で Retina スクリーンを検出し、高解像度スプライト XXX_2x.png を使用する

Question

Telerik の Kendo UI フレームワークを使用して Android アプリケーションを開発しています。アプリは高密度 Retina スクリーン (Nexus 10) で実行されており、Kendo スプライトは非常に小さく表示されます。

フォルダーには高密度のスプライト PNG があります (例: sprite.png & sprite_2x.png)。ただし、私が高解像度の画面を使用しているにもかかわらず、Kendo フレームワークは低解像度バージョンを提供しているようです。

アプリ内で : alert(window.devicePixelRatio) を実行すると、値 2 (高解像度画面) が取得されますが、低解像度の sprite.png が提供されます。

CSS スタイルシート内に、高解像度スプライトを使用するための定義があります。

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min device-pixel-ratio: 2) {
  .k-icon:not(.k-loading),
  .k-grouping-dropclue,
  .k-drop-hint,
  .k-callout,
  .k-tool-icon,
  .k-state-hover .k-tool-icon,
  .k-state-active .k-tool-icon,
  .k-state-active.k-state-hover .k-tool-icon,
  .k-column-menu .k-sprite,
  .k-mobile-list .k-check:checked,
  .k-mobile-list .k-edit-field [type=checkbox]:checked,
  .k-mobile-list .k-edit-field [type=radio]:checked {
    background-image: url('Metro/sprite_2x.png');
    background-size: 340px 336px;
  }
  .k-dropdown-wrap .k-input,
  .k-picker-wrap .k-input,
  .k-numeric-wrap .k-input {
    -moz-border-radius: 0 0 0 0;
    -webkit-border-radius: 0 0 0 0;
    border-radius: 0 0 0 0;
    }
}

HTML ファイルでは、メタ ビューポートは次のように定義されています。

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

誰かが何が問題なのか知っていますか?

どうもありがとう