我正在创建一个基于 Web 的应用程序,它将在计算机和手持设备上运行。
我正在编写两个 css 文件,一个用于 pc,另一个用于手持设备。
在 onload 事件中,我调用了一个外部 javascript,我编写了代码来根据用户代理动态加载 css。
当我在 google chrome 开发人员选项上运行我的应用程序以审核页面时,它说要避免从 javascript 加载 css。请任何人告诉我这种方法在性能方面是否正确,或者是否有其他解决方案。
我正在创建一个基于 Web 的应用程序,它将在计算机和手持设备上运行。
我正在编写两个 css 文件,一个用于 pc,另一个用于手持设备。
在 onload 事件中,我调用了一个外部 javascript,我编写了代码来根据用户代理动态加载 css。
当我在 google chrome 开发人员选项上运行我的应用程序以审核页面时,它说要避免从 javascript 加载 css。请任何人告诉我这种方法在性能方面是否正确,或者是否有其他解决方案。
正如其他人所建议的那样,您可以使用响应式布局、媒体查询、服务器端用户代理检测或它们的组合来在桌面和移动浏览器中提供良好的体验。
但是您也想知道您是否采用了错误的方法,以下是它可能不是最佳方法的一些原因:
如果你的目标是现代浏览器,你应该尝试使用响应式布局和媒体查询。尽量避免用户代理字符串检测,但如果您需要将它们用于边缘情况,请将其作为原始请求的一部分在服务器端处理。
您需要了解响应式网页设计。
响应式网页设计(通常缩写为 RWD)是一种网页设计方法,在这种方法中,网站经过精心设计,可在各种设备上提供最佳的查看体验——轻松阅读和导航,只需最少的调整大小、平移和滚动(从台式电脑显示器到手机)。参考:http ://en.wikipedia.org/wiki/Responsive_web_design
响应式网页设计教程:http ://webdesignerwall.com/tutorials/responsive-design-in-3-steps
我从该警告中了解到的是,您不是使用 JavaScript 来加载 CSS 文件,而是使用标记来执行此操作。
实现此目的的一种方法是从 JS 向 body 元素添加一个类,并在 CSS 中使用该类来确定元素如何根据设备设置样式。另一种方法是对桌面和移动设备使用不同的 CSS 媒体查询。
大多数时候(如果不是总是),您可以避免从 JS 加载 CSS,并且您可以获得能够将所有内容缩小到一个文件中以进一步提高性能的优势。
作为一般提示,我总是尽可能多地使用 CSS,响应式设计在没有 JS 的情况下完全可行。
您知道媒体查询吗?