文章/答案/技术大牛

发布

社区首页 >问答首页 >视网膜和非视网膜ios应用程序

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

Stack Overflow用户

提问于 2012-05-04 13:17:55

回答 1查看 1.2K关注 0票数 0

我对Retina显示器有意见。我有一个应用程序可以在非视网膜显示器上正常工作。

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

现在，当我在retina-display上试用该应用程序时，所有项目都显示为大小的的两倍。我猜是因为iPhone 4分辨率(例如window.innerHeight )仍然是480x320，即使真正的分辨率应该是960x640。

现在我的问题是，我需要一个独立的css来显示视网膜，还是我可以缩放所有的东西？

css

retina-display

回答 1

Stack Overflow用户

发布于 2012-05-04 13:32:16

作为一个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;
}

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

@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.io研究员提供的非常棒的服务。

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

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

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/10449614

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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