使用jquery检测响应式设计的变化答案

【问题标题】：Using jquery to detect changes in responsive design使用jquery检测响应式设计的变化
【发布时间】：2012-11-19 16:00:53
【问题描述】：

我需要在支持宽、正常和窄宽度的响应式设计中绕过一些 javascript 代码。在“宽”模式下，我需要绕过代码。我可以这样写：

if ($('#page').width() < 1237) {
   ... do the animation stuff
}

有没有更好的方法来避免硬编码像素宽度？

我在想，当调整窗口大小时，我可以将一个类应用于 body 元素......类似于：

if (width >= 1237) {
    $('body').removeClass('layout-normal').removeClass('layout-ipad').addClass('layout-wide');
}
else if (width >= 980) {
    $('body').removeClass('layout-wide').removeClass('layout-ipad').addClass('layout-normal');
}
else {
    $('body').removeClass('layout-wide').removeClass('layout-normal').addClass('layout-ipad');
}

这将允许我将硬编码的宽度隔离为单个函数，然后我可以编写：

   if (!$('#page').hasClass('layout-wide') {
       ... do the animation stuff
    }

但是有没有办法完全避免硬编码像素宽度？

【问题讨论】：

如果可以使用媒体查询，你为什么要做这个js
我有一个导航按钮，它触发了一个功能，该功能显示了一系列指向该站点的链接。当窗口处于宽模式时，这些链接已经显示。我需要检测它们已经在显示，而不是调用显示它们的 javascript。

标签： jquery responsive-design

【解决方案1】：

但是有没有办法完全避免硬编码像素宽度？

媒体查询是最好的方法

@media (max-width:767px) {
  .class{}
}

【讨论】：

我已经在应用媒体查询来实现 3 种不同的视图模式。我需要知道确定我在 JavaScript 中处于哪种模式的最佳方法......而不是 CSS。

【解决方案2】：

这就是我想出的……我的方法是将类应用于特定于每个支持的布局宽度的 body 元素。如果存在媒体查询，我只想应用这些类，所以首先我检查浏览器是否支持它们。以下是讨论该问题的线程：

I need an easy way to detect CSS3 media query support using jquery

不幸的是，在这个解决方案中，我需要对我支持的宽度进行硬编码。如果有更好的方法可以做到这一点，请随时发布。目前，这是为了快速获得结果而做出的小幅权衡。

这是 CSS：

/* Add to your main CSS file - used to test for media query support */
@media all and (min-width:1px) {
    .mediatest {position:absolute}
}

这是 JavaScript：

var $globals = {
    mediaQuerySupport: false
};

function initMediaQueries () {
    // tests for media query support and if it exists, it applies classes to the body element on window resize
    $globals.mediaQuerySupport = false;

    /*
    test if the browser knows about media queries
    create a div, apply the test class, test to see if the computed style is absolute... then delete the div
    */
    var d = document.createElement('div');
    d.className = "mediatest"; // found in main css file
    document.body.appendChild(d);
    if( window.getComputedStyle && window.getComputedStyle(d).position == "absolute") {
        $globals.mediaQuerySupport = true;
    }
    document.body.removeChild(d);

    if ($globals.mediaQuerySupport) {
        // apply a class to the body element now and when window resizes
        setBodyLayout ();
        $(window).resize(function () {
            setBodyLayout();
        });
    }
} // initMediaQueries ()

function mediaQueriesEnabled () {
    return ($globals.mediaQuerySupport);
}

function setBodyLayout () {
    // hard-coded widths for the supported media query layouts - change to your needs
    var width = $(window).width();
    if (width >= 1237) {
        $('body').removeClass('layout-normal').removeClass('layout-ipad').addClass('layout-wide');
    }
    else if (width >= 980) {
        $('body').removeClass('layout-wide').removeClass('layout-ipad').addClass('layout-normal');
    }
    else { // if narrower than 980, its the most narrow width
        $('body').removeClass('layout-wide').removeClass('layout-normal').addClass('layout-ipad');
    }
}

【讨论】：

【解决方案3】：

这篇文章正是您要找的： http://www.xurei-design.be/2013/10/how-to-accurately-detect-responsive-breakpoints/

【讨论】：