0

我正在使用 Telerik 的 Kendo UI 框架开发一个 Android 应用程序。该应用程序在高密度视网膜屏幕 (Nexus 10) 上运行,剑道精灵看起来非常小。

文件夹中有一个高密度精灵 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" />

有人知道可能是什么问题吗?

非常感谢

4

0 回答 0