我正在创建一个基于 Web 的应用程序，它将在计算机和手持设备上运行。
我正在编写两个 css 文件，一个用于 pc，另一个用于手持设备。
在 onload 事件中，我调用了一个外部 javascript，我编写了代码来根据用户代理动态加载 css。
当我在 google chrome 开发人员选项上运行我的应用程序以审核页面时，它说要避免从 javascript 加载 css。请任何人告诉我这种方法在性能方面是否正确，或者是否有其他解决方案。
问问题
256 次
4 回答
0
正如其他人所建议的那样，您可以使用响应式布局、媒体查询、服务器端用户代理检测或它们的组合来在桌面和移动浏览器中提供良好的体验。
但是您也想知道您是否采用了错误的方法，以下是它可能不是最佳方法的一些原因：
- 在下载并应用正确的样式表之前，内容将被取消样式。如果他们的连接速度很慢或不稳定，那么加载样式表很容易需要 10 秒，在此期间他们看到的是一团糟。
- 仅仅知道用户代理可能还不够。他们的屏幕分辨率是多少？浏览器是否占据全屏？
- 加载样式表是一个额外的请求。避免不必要的请求，尤其是在网络延迟对完成每个请求有很大贡献的移动网络上。
- Javascript 可能未启用 - 如果用户禁用了 Javascript 或他们的浏览器不支持它。你的网站会发生什么？
如果你的目标是现代浏览器，你应该尝试使用响应式布局和媒体查询。尽量避免用户代理字符串检测，但如果您需要将它们用于边缘情况，请将其作为原始请求的一部分在服务器端处理。
于 2012-11-23T06:32:20.683 回答
0
您需要了解响应式网页设计。
响应式网页设计（通常缩写为 RWD）是一种网页设计方法，在这种方法中，网站经过精心设计，可在各种设备上提供最佳的查看体验——轻松阅读和导航，只需最少的调整大小、平移和滚动（从台式电脑显示器到手机）。参考：http ://en.wikipedia.org/wiki/Responsive_web_design
响应式网页设计教程：http ://webdesignerwall.com/tutorials/responsive-design-in-3-steps
于 2012-11-23T06:02:40.820 回答
0
我从该警告中了解到的是，您不是使用 JavaScript 来加载 CSS 文件，而是使用标记来执行此操作。
实现此目的的一种方法是从 JS 向 body 元素添加一个类，并在 CSS 中使用该类来确定元素如何根据设备设置样式。另一种方法是对桌面和移动设备使用不同的 CSS 媒体查询。
大多数时候（如果不是总是），您可以避免从 JS 加载 CSS，并且您可以获得能够将所有内容缩小到一个文件中以进一步提高性能的优势。
作为一般提示，我总是尽可能多地使用 CSS，响应式设计在没有 JS 的情况下完全可行。
于 2012-11-23T06:03:12.943 回答
0
您知道媒体查询吗？
于 2012-11-23T06:04:58.110 回答