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

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用来检测您的Web应用程序是否在Retina显示器上运行.如果window.devicePixelRatio > 1那时它是Retina显示器.然后,您可以替换客户端上的每个图像:

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