1

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

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

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

谢谢你的时间 ：）

4

2 回答 2

1

您应该向移动浏览器提供较低分辨率的图像。一种方法是使用 CSS 媒体查询：http: //mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-您的网站/

于 2012-12-25T23:12:18.543 回答
1

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

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

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

于 2012-12-25T23:15:15.380 回答