手持设备的样式表可以跳过加载图像吗？

Question

我有一个桌面样式表，另一个是掌上电脑样式表。当在桌面上显示时，网页会显示一些图像，但在手持设备上显示时会隐藏这些图像。该页面显示为桌面和手持设备的设计。

当我检查服务器日志时，我发现手持设备实际上仍在加载图像，只是没有显示它们。有没有办法阻止手持设备完全加载图像，因为它不需要它们，而不必维护两组网页？可以使用样式表来完成吗？

提前致谢。

Ray Mond

Answer 1

将您不想在移动设备上显示的图像包括为背景图像。在浏览器样式表中，您可以使用

.element { 
    background: #FFF url('image.png') no-repeat left top; /* or whatever */
}

虽然在手持式样式表中你只是没有设置背景图像，因此，根据具体用途，你可以使用

.element {
    display: none;
}

或

.element { 
    background: #FFF;
}

但是，之后通过CSS规则（仅<img src="" />等）删除您使用display: none包含的图像，但这不会阻止它们加载，如您所注意到的那样。

Answer 2

在标记之前按HTTP标题发送样式表：

Link: <compact.css>; rel="stylesheet"; media="handheld"

然后最常用的手持浏览器 - Opera - 将不会加载图像。然而，WebKit（Safari）仍然可以 - 甚至隐藏元素的背景图像！