在 <head> 中为手机网站添加 CSS 会更好吗？答案

【问题标题】：Would it be good to have CSS in <head> for mobiles site?在 <head> 中为手机网站添加 CSS 会更好吗？
【发布时间】：2010-09-17 19:03:58
【问题描述】：

在<head> 中为手机网站添加 CSS 好不好？因为不会有太多的 css 需要编写和维护。

<head>
<style type="text/css">

css here...........

</style>
</head>

它将保存一个 HTTP 请求。我们可以为网站保留一个常见的header.php。

或者在移动网站上保留 <head> 中的 css 仍然是个坏主意？

【问题讨论】：

移动与否，http 是 http，因此在最佳实践中 CSS 属于头部。
@Chris, css <style> blocks 属于<head>，但我认为@metal-gear-solid 是在询问整个 stylesheet i> 应该包含在文档的头部，而不是作为外部资源引用。

【解决方案1】：

不推荐。

您最初可能会保存一个 HTTP 请求（请记住缓存了一个 CSS 文件），但从长远来看，我认为您会发现收益很小，而且您正在添加额外的文本通过每个请求发送。维护也很重要。

根据移动设备上的 CSS 数量/页面加载频率与 ajax 加载数据的不同，如果包含内联 CSS，您可能会节省一些加载时间，但这是逐案判断的 - 安全的答案是把它放在一个由浏览器自动缓存的文件中。

查看该页面上 HTML 的大小，其中一半以上是 CSS。

【讨论】：

【解决方案2】：

我最近在我们的团队中进行了这个讨论。我们的结论是内联 CSS（反对将它们作为单独的下载并依赖过期标头缓存在手机上）。我们的一些主要考虑因素是：

针对@Bob 的维护点，我们将所有css 保存在服务器上的单独文件中，并在生成HTML 时将其注入到HTML 中（服务器端是JSF）。如果你没有这个选项，那么我同意 Bob - 这将成为维护的噩梦。

注意：我们同时满足 WIFI 智能手机用户 (20%)、3G/Edge 以上智能手机 (40%) 和 3G/Edge 以上功能手机用户 (40%) 的需求。

【讨论】：

【解决方案3】：

外部 css 可以节省 bw，但我遇到了一些手机无法处理外部 css 的情况。如果您想覆盖广泛的设备，这可能是个好主意。

【讨论】：