通过jquery区分移动布局与桌面布局

Question

我必须在响应式网页中实现一项功能，该功能的行为应略有不同，具体取决于通过移动布局与桌面布局进行查看。

它是一个带有ul项目的简单块。在移动布局上，我想应用jquery悬停来突出显示li项目。在桌面布局上，我希望能够以不同的方式设置li项目的样式。

我正在寻找一种最佳方法，以区分屏幕大小是移动布局还是大小是桌面布局。我想到的方法是

通过媒体查询隐藏或显示该类，然后检查是否存在类以区分移动与桌面。有更好的方法吗？

注意：通过媒体查询，我显示了不同的布局，但问题仅限于通过jquery显示不同的行为，具体取决于布局。

Answer 1

使用逻辑运算符复制您的CSS media queries，将正文宽度与已知大小进行比较。

$(document).ready(function(){

    var bodyWidth = $('body').width(); 

    if(bodyWidth > 320 && bodyWidth < 400) {
        alert('Mobile')   
    }

    if(bodyWidth > 768 && bodyWidth < 1024) {
        alert('Tablet')   
    }

    if(bodyWidth > 1224) {
        alert('Desktop')   
    }

});

您还可以附加到resize()事件以获得更具响应性的效果。