如果浏览器具有一定的尺寸，去除jQuery效果？

我正在构建一个响应式布局，并利用少数几个jQuery插件，如Tabs，Drop菜单，滚动到顶部等，我一直在努力的一件事是浏览器在它的最小位置如何带走jQuery的魔力？如果浏览器具有一定的尺寸，去除jQuery效果？

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

例如如果有jQuery IF浏览器的观点是= < 320px那么不要运行等？

在发布之前，我已经做了一些研究，希望专家能够提供帮助。

2013-04-06 Codesworth

一种方式做到这一点可能是尝试包装一个$(window).resize事件内部宽度的状态：

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

来源

2013-04-06 09:30:58 lifetimes

谢谢，我一定会试试这个，都有道理:) – Codesworth 2013-04-06 09:36:11

@Codesworth没问题！让我知道如果它是固定的，如果不是我们可以看看其他解决方案:)谢谢 – lifetimes 2013-04-06 10:16:21

嗨，我注意到这只适用于当页面加载在x分辨率 - 如果浏览器调整大小它不适用... eg载入320px并调整大小为640px>精细载入640px并调整大小为320px>不移除效果 – Codesworth 2013-04-07 12:07:50

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

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

但是我使用CSS3 media queries打造一个负责任的网页设计建议你。

媒体查询由一个媒体类型，并且至少一个表达，通过使用媒体的功能，如宽度，高度和颜色限制了样式表的范围。在CSS3中添加媒体查询后，可以根据特定范围的输出设备对内容进行定制，而不必更改内容本身。

例如：

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

来源

2013-04-06 09:33:00 Eli

感谢你好 - 好，很好，我绝对使用CSS3媒体查询，虽然它与jQuery混合证明麻烦 – Codesworth 2013-04-06 09:35:27

嗨，我注意到这只适用于当页面加载在x分辨率 - 如果浏览器是调整它不适用... eg在320px下加载并调整大小为640px>精细加载640px并调整大小为320px>不会移除效果 – Codesworth 2013-04-07 12:08:21

如果浏览器具有一定的尺寸，去除jQuery效果？

回答

相关问题