2

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

任何带有代码片段的开始提示都将受到高度赞赏。

4

4 回答 4

5

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

于 2013-08-09T14:37:19.873 回答
1

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

工作示例

@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

});

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

.getScript() 的 API 文档

于 2013-08-17T15:06:14.957 回答
1

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

于 2013-08-16T11:18:49.913 回答
0

使用Modernizr'touch event检测。它将class在body标签中添加一个，或者您可以使用javascript.

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

于 2013-08-17T04:27:44.663 回答