问题描述
我们的目标是模拟开发人员可以使用原生 iOS 应用程序执行的操作:即，使用基于单位的单一布局来适应 Retina 显示器 (640x960) 和非 Retina 显示器 (320x480).
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，一组用于非 Retina，并以称为单位的相关术语设计它们的布局.如果开发者遵循一定的命名约定，iOS 会自动检测用户的屏幕尺寸并使用正确的资源并相应地缩放布局.
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.
这意味着开发人员可以用一个代码库为两个用户群提供服务.
This means devs can serve two user bases with one code base.
是否存在帮助 HTML5 开发人员完成相同任务的框架?
Do frameworks exist to help HTML5 devs accomplish the same thing?
人们做了什么来为非 Retina 和 Retina 显示器提供服务，同时最大限度地减少重复代码?
What have people done to service non-Retina and Retina displays while minimizing duplicate code?
谢谢！
推荐答案
有两个简单的方法可以让您的页面在两种模式下都能正常工作.
There are two simple things you can do to make your pages work in both modes.
首先，您在文档头中使用元标记设置视口.这将为您提供横向 480 和纵向 320 的页面宽度.您可以使用 CSS 媒体查询检查您所处的方向.
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.
<meta name="viewport" content="width=device-width; initial-scale=1, maximum-scale=1">
其次，使用 CSS background-size 属性为所有图像提供视网膜图像.由于您的虚拟页面宽度为 320 像素，因此在视网膜显示器上，每个像素实际上是 2 像素 x 2 像素.如果您在 20x20 的盒子中提供 40x40 的图像，视网膜显示屏将按原样显示，而非视网膜显示屏将按比例缩小像素.
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.
.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.
这篇关于使用一个代码库为非 Retina 和 Retina 显示器提供服务:用于在 iPhone 或 iOS 设备上为 HTML5 应用程序缩放布局和资产的框架?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！