Question

我已经知道功能检测比设备检测更好。但是在一个响应式网站项目中，我使用的是Jquery插件，它可以改善桌面体验，但不会提高移动设备和触控设备的体验，因此我只想为桌面浏览器加载一些特定的javascript和css文件。

例如，下面的代码我只想加载桌面。我无法使用任何服务器端解决方案，因为它是在Google云端硬盘上托管的静态页面。

std::bind

Answer 1

第一步：嗅探用户代理

您可以使用此类库 - https://github.com/madferro/Sniff.js 或者开发自己的解决方案。来自MDN - https://developer.mozilla.org/en-US/docs/Browser_detection_using_the_user_agent

总之，我们建议在任何地方查找字符串“Mobi” 用户代理检测移动设备。

第二步：动态加载资源

同样，您可以通过编写脚本和样式标记（document.createElement('script')）来自己完成，或者您可以使用库：

最终看起来与此类似（未经测试）：

<head>

<link rel="stylesheet" href="css/common.css" />
<script src="js/common.js"></script>
<script src="js/sniff.js"></script>

<script>
    if(!sniff.mobile){
        var scriptTag = document.createElement('script');
        scriptTag.setAttribute("type","text/javascript");
        scriptTag.setAttribute("src", "js/desktop.js");
        document.getElementsByTagName("head")[0].appendChild(scriptTag);

        var linkTag = document.createElement('link');
        linkTag.setAttribute("type","text/css");
        linkTag.setAttribute("href", "css/desktop.css");
        document.getElementsByTagName("head")[0].appendChild(linkTag);
</script>    
</head>

如何使用客户端解决方案为桌面设备呈现Javascript和CSS？

1 个答案: