javascript 功能仅在移动设备中答案

【问题标题】：java script functionality only in mobile devicejavascript 功能仅在移动设备中
【发布时间】：2015-07-07 04:47:27
【问题描述】：

我只想要移动设备 767px 中的 java 脚本功能。这是我的代码

$('#my-btnn').click(function () {
    $('#mobile-login').hide();
    $('#user-settings').slideToggle('fast');
});

【问题讨论】：

你想隐藏#my-btnn或者你想点击它什么都不做？
我希望仅在移动设备 767px 中使用此 javascript 功能，而我想在桌面站点中禁用此 javascript 功能。

标签： javascript media-queries

【解决方案1】：

您可以简单地检查窗口宽度以确定功能是否应该工作：

$('#my-btnn').click(function () {
    if ($(window).width() < 767) {
        $('#mobile-login').hide();
        $('#user-settings').slideToggle('fast');
    }
});

【讨论】：

【解决方案2】：

您可以通过检查您的分辨率来绑定您的点击。使用 onResize 并通过 screen.width 进行检查

$(window).resize(function() {
    if (screen.width <= 767) {
         $('#my-btnn').bind('click', function () {
            $('#mobile-login').hide();
            $('#user-settings').slideToggle('fast');
         });
    }
});

你可以检查你是否提前绑定。

或者你可以在 onReload 中添加这个检查

【讨论】：

请注意，它最终会出现在几十个点击事件处理程序中，因为每个 window.onresize 事件（对于小尺寸）都会有新的绑定。
它太棒了...只是这个代码的一个小问题，我的切换没有保持打开 onlclick。