用一个代码库服务于非Retina和Retina显示:为iphone或iOS设备上的HTML5应用缩放布局和资产的框架

Question

我们的目标是模仿开发者对原生iOS应用的做法:即使用基于单位的单一布局，以适应Retina显示屏(640x960)和非Retina显示屏(320x480)。

所有iOS开发者需要做的就是提供两组资产，一组用于Retina，另一组用于非Retina，并以相对的单位来设计它们的布局。只要开发者遵循一定的命名约定，iOS就会自动检测用户的屏幕大小，并使用正确的资产并相应地缩放布局。

这意味着开发者可以用一个代码库服务两个用户群。

是否存在框架来帮助HTML5开发者完成同样的事情?

人们做了什么来服务非视网膜和视网膜显示，同时尽量减少重复代码?

谢谢!

Answer 1

你可以做两件简单的事情来让你的页面在两种模式下都能工作。

首先，在文档头部使用元标记设置视口。这将给你一个横向480和纵向320的页面宽度。你可以使用CSS媒体查询来检查你所处的方向

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

其次，使用CSS background-size属性为所有图像提供视网膜图像。由于虚拟页面宽度为320px，因此每个像素在视网膜显示器上实际上是2px × 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">

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

Answer 2

你在视网膜显示器上使用的每个单位仍然是相同的，所以你需要做的就是用2x版本替换所有图像。

你可以使用window.devicePixelRatio来检测你的web应用程序是否在视网膜显示器上运行。如果是window.devicePixelRatio > 1，那就是视网膜显示器。然后，您可以替换客户端上的每个图像:

1. 搜索所有<img />并替换src属性。
2. 搜索所有css并替换background-image。
3. 如果你使用canvas，创建一个2x密度和使用2x图像。这意味着当使用100px * 100px <canvas></canvas>元素时，将其内容设置为200px * 200px。