0

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

在我的 CSS 列表中,我将 a 的高度设置listitem20px.

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

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

4

1 回答 1

3

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

-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

于 2012-05-04T13:32:16.233 回答