问使用一个代码库为非视网膜和视网膜显示提供服务:在iPhones或iOS设备上为HTML5应用程序缩放布局和资源的框架？

EN

有两件简单的事情可以让你的页面在这两种模式下工作。

首先，在文档头中使用meta标记设置视区。这将使您的横向页面宽度为480，纵向页面宽度为320。您可以使用CSS媒体查询检查您所处的方向。

<meta name="viewport" content="width=device-width; initial-scale=1, maximum-scale=1">

其次，使用CSS的background-size属性为所有图像提供视网膜图像。由于您的虚拟页面宽度是320px，因此在视网膜显示器上，每个像素实际上是2px x 2px。如果您在20x20框中提供40x40图像，视网膜显示器将按原样显示它，而非视网膜显示器将缩小像素。

.my-button {
    width:  20px;
    height: 20px;
    background-image: url(retina-images/my-button-40x40.png);
    -webkit-background-size: 20px 20px;
    background-size: 20px 20px;
}

如果你使用一个图像标签，这也应该是有效的：

<img src="retina-images/my-button-40x40.png" width="20" height="20">

你也许可以做更多的工作来检查实际的屏幕尺寸，并为非视网膜人群提供较小的图像，但我认为好处不会那么明显。

你在Retina显示屏上使用的每个单元都是一样的，所以你需要做的就是用2x版本替换所有的图像。

您可以使用window.devicePixelRatio来检测您的web应用程序是否在Retina显示屏上运行。如果是window.devicePixelRatio > 1，那么它就是视网膜显示屏。然后，您可以替换客户端上的所有图像：

search all css and replace background-image.

• if

1. search all <img /> and replace src attribute.
2. search all css and replacebackground-image.
3. if你使用canvas，创建2倍密度，使用2倍图像。这意味着当使用100px * 100px的<canvas></canvas>元素时，将其内容设置为200px *200px。