Question

我对Retina显示器有问题。我有一个在非视网膜显示器上工作正常的应用程序。

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

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

现在我的问题是，我是否需要单独的css用于视网膜显示器，还是可以扩展所有内容？

Answer 1

作为网络应用，您需要使用

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

因为这是CSS媒体查询，可以让你知道它是否是视网膜显示器

对于图像上的一个小例子，假设你有：

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

通常你会有类似的东西：

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

将其加载到视网膜显示器中，您需要添加：

@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