我的 Retina 显示器有问题。我有一个在非视网膜显示器上运行良好的应用程序。
在我的 CSS 列表中,我将 a 的高度设置listitem
为20px
.
现在,当我在视网膜显示器上尝试应用程序时,所有项目都显示为 size 的两倍。我猜是因为 iPhone 4 的分辨率(window.innerHeight
例如)仍然480x320
是即使真正的分辨率应该是960x640
.
现在我的问题是,我需要一个单独的 css 用于视网膜显示器还是可以缩放所有内容?
我的 Retina 显示器有问题。我有一个在非视网膜显示器上运行良好的应用程序。
在我的 CSS 列表中,我将 a 的高度设置listitem
为20px
.
现在,当我在视网膜显示器上尝试应用程序时,所有项目都显示为 size 的两倍。我猜是因为 iPhone 4 的分辨率(window.innerHeight
例如)仍然480x320
是即使真正的分辨率应该是960x640
.
现在我的问题是,我需要一个单独的 css 用于视网膜显示器还是可以缩放所有内容?
作为网络应用程序,您需要使用
-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 指南文档的链接已更新