0

我正在编写一个具有渐进增强功能的移动优先网站，因此我设置了一个处理小/移动屏幕（704px 或更小）布局的 base.css 文件和一个处理桌面/平板电脑屏幕布局的 full.css 文件.

这就是我链接文件的方式

<link rel="stylesheet" href="css/base.css?v=1.67" media="screen, handheld">
<link rel="stylesheet" href="css/full.css?v=1.7" media="screen and (min-width:44em)">

（44em 是 704 像素，基于 16 像素的“基本”字体大小，但是作为调试此问题的一部分，我使用了绝对像素值，并使用了大像素值，但无济于事。说到问题......）

我遇到的问题是我的 nexus 4 设备下载了 full.css 文件。它显示在我使用 USB 调试设置并使用wireshark 确认的chrome 检查器中。它甚至会向控制台输出一些警告，因此肯定会处理 full.css。

如上所述，我什至尝试使用大像素值（1980 像素），但手机仍会下载文件。真正奇怪的部分是布局看起来不像 full.css 正在使用。事实上，如果我删除媒体查询以便它“正确”加载它，它应该会破坏布局。所以基本上网站运行正常，但带宽仍用于下载 full.css，这并不理想，因为我想尽可能优化网站。

这是 chrome for android 的已知问题吗？是否有任何解决方案（缺少在服务器上进行浏览器/分辨率检测）？

4

2 回答 2

0

浏览器下载所有样式表，因为 CSSOM 目前无法管理包含但未下载的样式表（将来可能通过属性解决）

浏览器可以自由地优先考虑样式表的下载顺序 - 如果您查看 iOS Safari 的这个瀑布（http://www.webpagetest.org/result/130912_9Z_7d0e1737392e338ea206af78bd615c89/），那么您将看到更大屏幕的下载样式表被推迟到瀑布的后期。

我通常建议将所有样式表合并到一个包含 MQ 的样式表中，因为它们包含高度重复的文本，可以很好地使用 GZIP 压缩。（在某些情况下您可能希望这样做）

于 2013-09-12T18:30:07.747 回答
0

您可以创建一个“移动优先”样式表。通常，您使用默认为桌面的媒体查询创建样式表，然后缩小到平板电脑，然后缩小到移动设备。

“移动优先”的做法恰恰相反。默认样式决定了它在移动设备上的外观，然后您移动到平板电脑，然后是桌面。

这背后的想法是平板电脑和桌面 CSS 不会加载到移动设备上，并且样式已经针对移动设备进行了优化。

我还没有通读这篇文章，但也许​​可以尝试这样的事情来获取更多信息。

http://www.html5rocks.com/en/mobile/responsivedesign/

于 2013-09-12T16:41:27.167 回答