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

Serving non-Retina and Retina displays with one code base: framework for scaling layouts and assets for HTML5 apps on iPhones or iOS devices?

提问by Crashalot

Our goal is to emulate what developers can do with native iOS apps: that is, use a single layout, based on units, to accommodate Retina displays (640x960) and non-Retina displays (320x480).

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

All iOS devs need to do is supply two sets of assets, one for Retina and one for non-Retina, and design their layouts in relative terms called units. Provided devs follow a certain naming convention, iOS automatically detects the user's screen size and uses the right assets and scales the layout accordingly.

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

This means devs can serve two user bases with one code base.

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

Do frameworks exist to help HTML5 devs accomplish the same thing?

是否存在帮助 HTML5 开发人员完成相同任务的框架？

What have people done to service non-Retina and Retina displays while minimizing duplicate code?

人们做了什么来维护非 Retina 和 Retina 显示器，同时最大限度地减少重复代码？

Thanks!

谢谢！

回答by Brian Nickel

There are two simple things you can do to make your pages work in both modes.

有两件简单的事情可以让您的页面在两种模式下都能正常工作。

First, you set your viewport with a meta tag in the document head. This will give you a page width of 480 in landscape and 320 in portrait. You can check what orientation you're in using CSS media queries.

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

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

Second, serve up retina images for all your images using the CSS background-size property. Since your virtual page width is 320px, each pixel is really 2px by 2px on a retina display. If you serve up a 40x40 image in a 20x20 box, retina displays will show it as is, and non-retina displays will scale down the pixels.

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

This should also work if you use an image tag:

如果您使用图像标签，这也应该有效：

<img src="retina-images/my-button-40x40.png" width="20" height="20">

You could probably do more work to check the actual screen size and serve up smaller images for the non-retina crowd, but I don't think the benefit will be that dramatic.

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

回答by Cat Chen

Every unit you use on a Retina Display is still the same, so all you need to do is replace all images with a 2x version.

您在 Retina 显示器上使用的每个单位都相同，因此您需要做的就是将所有图像替换为 2x 版本。

You can use window.devicePixelRatioto detect if your web app is running on a Retina Display. If window.devicePixelRatio > 1then it's a Retina Display. Then you can replace every image on the client-side:

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

1. search all <img />and replace srcattribute.
2. search all css and replace background-image.
3. if you use canvas, create a 2x density and use 2x images. That means when working with a 100px * 100px <canvas></canvas>element, set its content to be 200px * 200px.

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