视网膜和非视网膜 ios 应用程序

我的视网膜显示器有问题。我有一个应用程序，可以在非视网膜显示器上运行良好。

在我的列表中，我将listitem的高度设置为 20px .

现在，当我在视网膜显示器上尝试该应用程序时，所有项目都会显示两倍的大小。我猜是因为iPhone 4分辨率（例如window.innerHeight）仍然480x320即使真正的分辨率应该是960x640 .

现在我的问题是，我是否需要为视网膜显示器使用单独的 css，或者我可以缩放所有内容吗？

作为Web应用程序，您需要使用"

-webkit-min-device-pixel-ratio:2

因为这是CSS媒体查询，可让您知道它是还是不是视网膜显示器

对于图像上的一个小示例，假设您有：

<body class="bkground"> ... </body>

通常你会有这样的东西：

.bkground {
  background-image: url(my-awesome-bkg.png);
  -webkit-background-size: 32px 16px;
}

要将其载入 Retina 显示屏，您需要添加：

@media all and (-webkit-min-device-pixel-ratio:2) {
  .bkground {
    background-image: url(my-awesome-bkg-hd.png);
  }
}

或者使用以下方法加载外部 CSS 中的所有图像：

<link rel="stylesheet" 
      href="retina.css" 
      media="all and (-webkit-min-device-pixel-ratio:2)" />

有一些外部服务会自动为您执行此操作，请查看Sencha研究员为 Sencha.io 提供的出色服务

<小时 />

更新了 Sencha.io 指南文档的链接

http://docs.sencha.io/0.3.2/index.html#!/guide

相关内容