Обнаружение экрана сетчатки и использование спрайтов высокого разрешения XXX_2x.png на Nexus 10

Question

Я занимаюсь разработкой приложения для Android с использованием инфраструктуры Terik Kendo UI. Приложение работает на экране сетчатки высокой плотности (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" />

Кто-нибудь знает в чем может быть проблема?

большое спасибо