为移动设备缩放大型 CSS 背景图像答案

【问题标题】：Scaling Large CSS Background Images For Mobile Devices为移动设备缩放大型 CSS 背景图像
【发布时间】：2012-12-11 15:32:20
【问题描述】：

我目前正在构建一个 XenForo 主题，该主题旨在使用透明度和有趣的 CSS3 效果展示全屏、中等高分辨率的照片背景。然而，我担心一个相当讨厌的缩放问题——尤其是在小型设备上。正如您可能想象的那样，一想到访问者试图在 3G 或 GPRS 连接上加载近 1 兆字节的照片，我就会感到痛苦。

有问题的背景是附加到<html> 元素的固定背景图像。

什么是处理规模问题的合适方法？我只会做这么多的压缩，那么基于 JavaScript 的解决方案为视口/设备提供适当大小的图像是否足够有效？还有其他我可以考虑的解决方案吗？

感谢您的宝贵时间:)

【问题讨论】：

【解决方案1】：

【讨论】：

【解决方案2】：

如上所述，使用 CSS 功能 @media 您可以为所有设备类型提供正确的图像尺寸。看看 Twitter 的 CSS 框架Bootstrap。

我建议对所有请求使用小图像，但仅将其替换为桌面浏览器，但平板电脑可以同时使用慢速互联网连接和快速 wifi 访问。这需要更复杂的解决方案。

此外，使用 AJAX 提供图像可能会大大加快页面速度。

【讨论】：