Question

以下是我的情况 - 我正在使用仅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吗？如果我关闭data（某种程度上），这些JQM标签是否会成为问题。还有其他水下石头可以出现吗？当通过移动设备访问网站并且我需要覆盖桌面样式时，我该如何处理这种情况呢？

任何有关代码段的提示都将受到高度赞赏。

Answer 1

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

Answer 2

假设您已经有一种可靠的方法来检测用户是否在移动设备上，我会创建名为desktop和mobile的专用类（如果您要定位，则会tablet他们）根据html标签中这些类的存在来打开和关闭javascript - 就像在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将运行。但是这种解决方案需要深入了解您当前的设置......

Answer 3

我假设您将使用媒体查询来更改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

});

我在示例中使用了background-color，但您可以使用将在媒体查询中更改的任何样式。

API Documentation for .getScript()

Answer 4

使用Modernizr的{{1}}检测。它会向touch event标记添加class，您也可以使用body对其进行测试。

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

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

4 个答案: