为一个代码库提供非Retina和Retina显示器：用于在iPhone或iOS设备上扩展HTML5应用程序的布局和资产的框架？

我们的目标是模仿开发人员可以使用本机iOS应用程序执行的操作：即，使用基于单位的单一布局来容纳Retina显示器（640×960）和非Retina显示器（320×480）。

所有iOS开发人员需要做的是提供两组资产，一组用于Retina，另一组用于非Retina，并设计相对称为单位的布局。 如果开发人员遵循某种命名约定，iOS会自动检测用户的屏幕大小并使用正确的资产并相应地缩放布局。

这意味着开发人员可以使用一个代码库为两个用户群提供服务。

是否存在框架以帮助HTML5开发人员完成同样的事情？

人们做了什么来服务非Retina和Retina显示器，同时最小化重复代码？

谢谢！

Answer 1

您可以使用两个简单的方法使页面在两种模式下都能正常工作。

首先，在文档头中使用元标记设置视口。 这将为您提供横向480页面宽度和320纵向页面宽度。 您可以查看使用CSS媒体查询的方向。

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

 .my-button { width: 20px; height: 20px; background-image: url(https://stackoverflow.com/questions/7733223/serving-non-retina-and-retina-displays-with-one-code-base-framework-for-scaling/retina-images/my-button-40x40.png); -webkit-background-size: 20px 20px; background-size: 20px 20px; } 

如果您使用图片标记，这也应该有效：

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

Answer 2

您在Retina显示屏上使用的每个单元仍然相同，因此您需要做的就是用2x版本替换所有图像。

您可以使用window.devicePixelRatio来检测您的Web应用程序是否在Retina显示器上运行。 如果window.devicePixelRatio > 1那么它就是Retina Display。 然后，您可以替换客户端上的每个图像：

1. 搜索所有并替换src属性。
2. 搜索所有CSS并替换background-image 。
3. 如果使用canvas ，则创建2倍密度并使用2x图像。 这意味着在使用100px * 100px 元素时，将其内容设置为200px * 200px。