iphone - 使用一个代码库 : framework for scaling layouts and assets for HTML5 apps on iPhones or iOS devices? 为非 Retina 和 Retina 显示器提供服务

Question

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

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

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

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

人们在为非 Retina 和 Retina 显示器提供服务的同时尽量减少重复代码做了什么？

谢谢!

Answer 1

您可以做两件简单的事情来让您的页面在两种模式下工作。

首先，您在文档头部设置带有元标记的视口(viewport)。这将为您提供横向 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">

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