在运行时加载css

Question

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

我正在为pc和另一个手持设备写两个css文件。

关于onload事件我打电话给一个外部的JavaScript我写了代码来动态加载基于用户代理的CSS。

当我在谷歌浏览器开发人员选项上运行我的应用程序来审计它所说的避免从JavaScript加载CSS的页面。可以请任何人告诉我这种方法在性能方面是否正确，或者是否有其他解决方案。

Answer 1

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

自适应网页设计（通常缩写为RWD）是网页设计的方法，其中的位点是制作以提供最佳的观看体验，便于阅读和导航用最少的调整大小，平移和滚动-跨越的各种设备（从台式电脑显示器到手机）。 编号：http://en.wikipedia.org/wiki/Responsive_web_design

自适应网页设计教程：

Answer 2

我从警告明白的是，而不是使用JavaScript来加载CSS文件，您使用的标记来做到这一点。

完成此操作的一种方法是向JS中的body元素添加一个类，然后在CSS中使用该类来确定元素如何根据设备进行样式设置。另一种方法是将不同的CSS媒体查询用于dekstop和mobile。

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

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

Answer 3

您是否知道Media Queries？

Answer 4

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

但是你也想知道，如果你采取了错误的方法，这里是一些原因它可能不是最好的方法：

1. 内容将无样式，直到正确的样式表已经下载并应用。如果它们处于缓慢或片状连接状态，则可能需要10秒钟才能加载样式表，在此期间他们正在查看混乱的混乱情况。
2. 只知道用户代理是不够的。他们的屏幕分辨率是多少？浏览器占用全屏吗？
3. 加载样式表是一个额外的请求。避免不必要的请求，特别是在移动网络中，网络延迟对完成每个请求有重大贡献。
4. Javascript可能未启用 - 如果用户禁用Javascript或其浏览器不支持它。你的网站会发生什么？

如果您针对的是现代浏览器，则应尝试使用响应式布局和媒体查询。尽量避免用户代理字符串检测，但如果您需要将它们用于边缘案例，请将其作为原始请求的一部分在服务器端进行处理。