javascript - 如果浏览器一定大小，删除 jQuery 效果？

Question

我正在构建一个响应式布局并使用一些 jQuery 插件，例如选项卡、下拉菜单、滚动到顶部等，我正在努力解决的一件事是，一旦浏览器处于最小位置，如何消除 jQuery 的魔力?

目前它在较小的视图中看起来很糟糕，所以如果您不介意，我只是在寻找一些指针或代码示例。

例如，如果有一个 jQuery IF 浏览器视点是 =< 320px 那么不要运行等？

在发帖之前我先做了一些研究，希望专家可以提供帮助。

Answer 1

一种方法是尝试将宽度条件包装在$(window).resize事件中：

$(document).ready(function(){
   $(window).resize(function() {
      if ($(window).width() <= 320) {
         // Leave empty
      }
      else {
        // Rest of your jQuery code can go here
      }
   });
});

Answer 2

$(window).resize(function(){
    var h = $(window).height();
    var w = $(window).width();

    if(w <= 320) {
         // Run your script
    }
});

但我建议您使用 CSS3媒体查询来构建响应式网页设计。

媒体查询由媒体类型和至少一个表达式组成，该表达式通过使用媒体特征（例如宽度、高度和颜色）来限制样式表的范围。在 CSS3 中添加的媒体查询让内容的呈现可以针对特定范围的输出设备进行定制，而无需更改内容本身。

例如：

@media only screen and (max-width : 320px) {
    /* Your styles here */
}