如何禁用 javascript 以进行响应式设计

Posted

技术标签:

【中文标题】如何禁用 javascript 以进行响应式设计【英文标题】：How to disable javascript for responsive design 【发布时间】：2012-10-25 10:52:47 【问题描述】：

我一直在使用超大的 jQuery 作为我网站的幻灯片背景。我正在使网站具有响应性并使用 css 媒体查询。

我希望能够在脚本低于 480 像素时禁用它。

这是实际滑块背景的脚本

$(document).ready(function()

         jQuery(function($)

            $.supersized(

                // Functionality
                slideshow               :   1,          // Slideshow on/off
                autoplay                :   0,          // Slideshow starts playing automatically
                start_slide             :   1,          // Start slide (0 is random)
                stop_loop               :   0,          // Pauses slideshow on last slide
                random                  :   0,          // Randomize slide order (Ignores start slide)
                slide_interval          :   3000,       // Length between transitions
                transition              :   6,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                transition_speed        :   1000,       // Speed of transition
                new_window              :   1,          // Image links open in new window/tab
                pause_hover             :   0,          // Pause slideshow on hover
                keyboard_nav            :   1,          // Keyboard navigation on/off
                performance             :   1,          // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
                image_protect           :   1,          // Disables image dragging and right click with javascript

                // Size & Position                         
                min_width               :   0,          // Min width allowed (in pixels)
                min_height              :   0,          // Min height allowed (in pixels)
                vertical_center         :   1,          // Vertically center background
                horizontal_center       :   1,          // Horizontally center background
                fit_always              :   0,          // Image will never exceed browser width or height (Ignores min. dimensions)
                fit_portrait            :   1,          // Portrait images will not exceed browser height
                fit_landscape           :   0,          // Landscape images will not exceed browser width

                // Components                           
                slide_links             :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
                thumb_links             :   1,          // Individual thumb links for each slide
                thumbnail_navigation    :   0,          // Thumbnail navigation
                slides                  :   [           // Slideshow Images
                                                    image : '/img/backgrounds/street-dance-background.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/',
                                                    image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/',  
                                                    image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/',
                                                    image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/',
                                                    image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-2.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/',
                                                    image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-3.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/',
                                                    image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-1.jpg', title : 'Image Credit: ***e Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-1.jpg', url : 'http://www.nonsensesociety.com/2011/06/***e-shaden/',
                                                    image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', title : 'Image Credit: ***e Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg', url : 'http://www.nonsensesociety.com/2011/06/***e-shaden/',
                                                    image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg', title : 'Image Credit: ***e Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-3.jpg', url : 'http://www.nonsensesociety.com/2011/06/***e-shaden/'
                                            ],

                // Theme Options               
                progress_bar            :   1,          // Timer for each slide                         
                mouse_scrub             :   0

            );
        );

我想我可以简单地通过使用 css 来做到这一点，例如在我的媒体查询中，只需将 #supersized 设置为 display:none

这是不好的做法，因为它仍然可以运行脚本，最好以某种方式禁用它？

【问题讨论】：

您可以使用 Modernizr 从 JavaScript 进行媒体查询。 您可以测试窗口是否大于 480px ........ $(document).ready(function() if($(window).width()>480 ) // 这里是你的代码 // ); 【参考方案1】：

我认为 Asad 的解决方案是最好的，或者您使用modernizr。 因为断点定义（480px）在单个文件中，而不是在 JS 和 CSS 中。 如果您使用 SCSS，则变量中的断点只有一个定义。

【讨论】：

【参考方案2】：

您可以在媒体查询中使用一些 css 规则设置一个隐藏的 div，然后使用 jQuery 的 css() 检查这些 css 属性，并在此基础上打开或关闭幻灯片。具体来说：

@media all and (max-width: 480px) 
    #testdiv
        display:none;

还有js：

if($("#testdiv").css("display") == "none")
    $.supersized(...);

请注意，这实际上是在使用 Modernizr 方法，而没有实际获取库。

【讨论】：

【参考方案3】：

正如其他人所提到的，您可以使用很多 jQuery 插件。但是，如果您只想使用普通的 jQuery，您也可以为所欲为。

可以使用jquery中的resize方法来检测窗口的大小。

$(window).resize(function() 
   if ($(this).width() > 480) 
      // call supersize method
   
);

然后在准备好文档时，请务必调用调整大小窗口，以便它最初调用或不调用该方法，具体取决于您窗口的当前大小：

$(document).ready(function() 
   $(window).resize();
);

PS> 如果您不需要每次调整窗口大小时都运行此脚本，而是仅在达到 480 像素以下时运行，则可以在需要禁用或启用脚本后进行轻微修改以取消绑定调整大小方法。

【讨论】：

这行得通，但如果您决定要在 500px 上使用此功能，则需要更新您的 mediaquery 和 javascript。使用Asad's solution 你只需要更新媒体查询【参考方案4】：

您可以使用 JavaScript 检测屏幕宽度，使用 screen.width，然后从那里确定您想要做什么。

if(screen.width < 480)  
    // do any 480 width stuff here, or simply do nothing
    return;
 else 
    // do all your cool stuff here for larger screens

在屏幕尺寸小于 480 的情况下，将所有动画和所有不想希望在 else 块中运行的代码包装起来。

请注意，IE 往往会做一些不同的事情，而且我没有 IE 来测试，所以你可能想在那里运行 screen.width 并在必要时调整任何差异。但在 Chrome 中，screen.width 返回 1280，这是我屏幕的正确宽度。

【讨论】：

【参考方案5】：

正如@Pointy 在 cmets 中指出的那样，modernizr 允许您从 javascript 调用媒体查询。阅读modernizr documentation

【讨论】：

【参考方案6】：

jRespond，一个由 Viget 发布的脚本，允许您根据视口大小控制 JavaScript：

文章：http://viget.com/inspire/managing-javascript-on-responsive-websites

代码：https://github.com/ten1seven/jRespond

【讨论】：

以上是关于如何禁用 javascript 以进行响应式设计的主要内容，如果未能解决你的问题，请参考以下文章

用Adobe XD 12更智能的快速完成响应式设计

移动端H5页面设计

响应式设计 Xcode 6 - 如何设置约束以使您的设计响应式？

对网站响应式设计的重新思考

融合响应式设计的知识点

响应式网页设计是最好的吗