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

Question

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

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

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

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

score 3 · Accepted Answer

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

-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 Fellows 为Sencha.io提供的很棒的服务

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

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

1 回答 1