Question

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

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

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

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

人们做了什么来服务非Retina和Retina显示器，同时尽量减少重复代码？

谢谢！

Answer 1

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

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

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

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

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

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

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

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

2 个答案: