从非移动设备访问时关闭 jQuery Mobile答案

【问题标题】：Turn off jQuery Mobile when accessed from non-mobile device从非移动设备访问时关闭 jQuery Mobile
【发布时间】：2013-08-11 11:31:42
【问题描述】：

这是我的情况 - 我正在开发一个仅使用 JQM 控件的网站，如果从桌面或移动设备访问该网站，则该网站使用的是 JQM 控件。我使用的是ASP.NET，所以在代码中，典型的控件如下所示：

<asp:Button runat="server" data-theme="b" data-icon="check" data-mini="true" SkinID="btnSelectMiniB"/>    
<asp:Button runat="server" data-theme="b" data-icon="arrow-r" data-iconpos="right" data-mini="true" SkinID="btnViewMiniB"/> 
<asp:DropDownList runat="server" data-theme="b" SkinID="ddlThemeB"></asp:DropDownList>

我需要一种技术，让我能够在不创建新网站的情况下为非移动设备整合新样式。如果我的网站是通过移动浏览器访问的，我可以以某种方式关闭JQM 脚本和CSS 吗？如果我关闭JQM（不知何故），这些data 标签是否会成为问题。是否还有其他可能出现的水下石头？当通过移动设备访问网站并且我需要覆盖桌面样式时，我该如何处理这种情况？

任何使用代码 sn-ps 的入门技巧都将受到高度赞赏。

【问题讨论】：

标签： css jquery-mobile mobile-devices

【解决方案1】：

编辑：如果您在检测到是移动还是桌面stackoverflow how to detect mobile 后仍在使用modernizr 的实用程序api，那么modernizr 带有一个名为yepnope.js 的动态脚本和css 加载程序，您可以在需要时使用它来注入JQM js 和css。当然还有其他选择，例如 require.js、LAB.js 等。您可能需要查看它们是否符合您的需要

【讨论】：

开始使用 HTML5 样板似乎不是一个选项，应用程序已经存在，我假设 Anton 不想重构整个标记。 CSS 媒体查询也不会阻止 JQM 加载。我不是故意粗鲁，但我不明白这怎么能成为问题的答案......
@Anton Belev Wallace 在你的问题中指出了我错过的一点，所以我相应地编辑了答案。
抱歉，我正在回复。今天晚些时候或明天我会看看你的建议。感谢您的回答！
@nsawaya Modernizr 和 yepnote.js 会有所帮助。我喜欢 yepnote.js 允许您在需要时注入 js/css 文件的事实。但是我正在使用 ASP.NET 主题，可能我必须想出一些可以切换主题而不是手动注入 css 的东西。

【解决方案2】：

假设您已经有一种可靠的方法来检测用户是否在移动设备上，我将创建名为 desktop 和 mobile 的专用类（如果您的目标是它们，则最终是 tablet）并切换 javascript根据 html 标记中这些类的存在来打开和关闭 - 就像在 Modernizr 中所做的那样。

一旦您的应用程序加载了这些类，您就可以将所有适用于移动设备的 javascript 置于以下条件内：

if ($('html').hasClass('mobile')) {
    // load mobile js
}

或

if ($('.mobile').length > 0) {
    // load mobile js
}

desktop 和 tablet 也是如此。

如果您的应用程序无法加载这些类，您可以通过响应式方法触发不同的 javascript：

// calculate viewport width
function responsive(){
    var scaffolding = '';
    var w = parseInt($(window).innerWidth(), 10);
    if (w < 480) { scaffolding = 'mobile'; }
    if (w >= 480 && w <= 980) { scaffolding = 'tablet'; }
    if (w > 980) { scaffolding = 'desktop'; }
    return scaffolding;
}

if (responsive() == 'mobile') {
    // load mobile js
}

if (responsive() == 'tablet') {
    // load tablet js
}

if (responsive() == 'desktop') {
    // load desktop js
}

如果我以最好的方式做到这一点，我会将移动资源与已经从服务器端分离的桌面资源分开，因为在这两种解决方案中，我都建议一切仍然会加载（并要求带宽），即使只有相关的 javascript 将运行。但这种解决方案需要了解您当前的设置...

【讨论】：

抱歉，我正在回复。今天晚些时候或明天我会看看你的建议。感谢您的回答！

【解决方案3】：

使用Modernizr 的touch event 检测。它会将class 添加到body 标签，或者您可以使用javascript 对其进行测试。

http://modernizr.com/docs/#touch

【讨论】：

【解决方案4】：

我假设您将使用媒体查询来更改 CSS，如果是这种情况，您可以检测到 CSS 中的更改并基于此加载 jQuery Mobile。

Working Example

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    /* Styles */
    html {
        background:rgb(255, 0, 0); /* red */
    }
}

$(function () {
    var color = $('html').css('backgroundColor');

    if (color == 'rgb(255, 0, 0)') {

        $.getScript("http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js", function () {
            alert("Script loaded and executed.");
            // here you can use anything defined in the loaded script

        });
    }
    // add additional if statements here

});

我在示例中使用了背景颜色，但您可以使用任何将在媒体查询中更改的样式。

API Documentation for .getScript()

【讨论】：