在运行时加载css

Question

我正在创建一个基于Web的应用程序，它将在计算机和手持设备上运行。

我正在为PC编写两个css文件，为手持设备编写另一个css文件。

在onload事件中我调用外部javascript我编写了代码，根据用户代理动态加载css。

当我在google chrome开发人员选项上运行我的应用程序来审核页面时，它说要避免从javascript加载CSS。可以请任何人告诉我这种方法在性能方面是否正确，还是有任何其他解决方案。

Answer 1

您需要了解响应式网页设计。

响应式网页设计（通常缩写为RWD）是一种网页设计方法，其中精心制作网站以提供最佳观看体验 - 轻松阅读和导航，只需最少的调整大小，平移，并滚动浏览各种设备（从台式计算机显示器到手机）。 参考：http://en.wikipedia.org/wiki/Responsive_web_design

响应式网页设计教程：http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

Answer 2

我从该警告中理解的是，您使用标记来代替使用JavaScript来加载CSS文件。

实现此目的的一种方法是从JS向body元素添加一个类，并在CSS中使用该类来确定元素如何根据设备进行样式设置。另一种方法是对dekstop和mobile使用不同的CSS媒体查询。

大部分时间（如果不总是），您可以避免从JS加载CSS，并且您可以在一个文件中缩小所有内容以进一步提高性能。

作为一般性提示，我总是尽可能地使用CSS，并且响应式设计完全可以在没有JS的情况下完成。

Answer 3

你知道Media Queries吗？

Answer 4

正如其他人所建议的那样，您可以使用自适应布局，媒体查询，服务器端用户代理检测或它们的组合，在桌面和移动浏览器中提供良好的体验。

但你也想知道你是否采取了错误的方法，以下是为什么它可能不是最佳方法的一些原因：

1. 在下载并应用正确的样式表之前，内容将不会被设置样式。如果它们处于缓慢或片状连接状态，则样式表可能需要10秒才能加载，在此期间他们会看到乱七八糟的混乱。
2. 只知道用户代理可能不够。他们的屏幕分辨率是多少？浏览器是否占据全屏？
3. 加载样式表是一项额外请求。避免不必要的请求，尤其是在网络延迟极大地影响完成每个请求的移动网络上。
4. 如果用户已禁用Javascript或其浏览器不支持，则可能无法启用Javascript。您的网站会发生什么变化？

如果您要定位现代浏览器，则应尝试使用自适应布局和媒体查询。尽量避免用户代理字符串检测，但如果您需要将它们用于边缘情况，请将其作为原始请求的一部分处理服务器端。