当前位置：文江博客话题详情

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

发布于 2024-12-09 14:25:56 字数 365 浏览 0 评论 0原文

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

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

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

是否有框架可以帮助 HTML5 开发人员完成同样的事情？

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

谢谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

几度春秋 2024-12-16 14:25:56

您可以执行两项简单的操作来使页面在两种模式下工作。

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

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

其次，使用 CSS 背景大小属性为所有图像提供视网膜图像。由于虚拟页面宽度为 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;
}

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

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

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

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.

<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.

.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.

回复收藏 0 原文