如何使用一个代码库为非Retina和Retina显示器提供服务：针对iPhone或iOS设备的HTML5应用程序缩放布局和资源的框架？

Question

我们的目标是模拟开发人员可以使用原生iOS应用程序的功能:即使用基于单元的单个布局来适应Retina显示器(640x960)和非Retina显示器(320x480)。

所有iOS开发人员需要做的就是提供两组资源，一组用于Retina显示器，另一组用于非Retina显示器，并使用称为单位的相对术语设计其布局。只要开发人员遵循特定的命名约定，iOS就会自动检测用户的屏幕大小，并使用正确的资源并相应地缩放布局。

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

是否存在框架来帮助HTML5开发人员实现同样的功能？

在最小化重复代码的同时，人们是如何为非Retina和Retina显示器提供服务的？

谢谢！

- Crashalot

Answer 1

有两件简单的事情可以让你的网页在两种模式下都能够工作。

首先，在文档头中使用meta标签设置viewport，这将使你在横向方向上拥有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用户提供较小的图像，但我认为好处不会那么明显。

- Brian Nickel

---

谢谢，布莱恩！那布局方面呢？我们在元素之间的间距上应该使用 em CSS 单位而不是百分比吗？ - Crashalot

这在很大程度上取决于你想做什么。如果你有两个相邻的元素，它们各占屏幕的48％，当你将手机旋转到横向时，间隙会增加。我建议让它们各占50％，然后使用em或px或任何东西进行填充。通过视口，你几乎可以保证1px在所有设备上的大小都是相同的，因此你不必像其他平台那样过多地担心与字体大小相关的尺寸问题。 - Brian Nickel

有一件事需要记住，就是在某些（Android）设备上，50% + 50% > 100%，甚至33% * 3 > 100%。通常人们会使用display:inline-block将div元素放在一起，这是一种流式布局，在这些设备上会溢出到下一行。我始终建议使用绝对定位或display:table-cell来进行此类布局构建。 - Brian Nickel

Answer 2

在Retina显示屏上，每个单位仍然是相同的，所以你只需要用2x版本替换所有图像即可。

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

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

- Cat Chen

---

如果您使用媒体查询，就不需要“替换”，只需创建一个特殊的设置来检测dpi，然后覆盖背景即可。 - BerggreenDK

是的，这也适用于CSS。您仍然需要使用JavaScript来覆盖非CSS图像。我希望有新的标准来解决这个问题。 - Cat Chen

不是说，你可以根据分辨率类型构建一个媒体查询来包含指定分辨率的正确图像。 - BerggreenDK