检测 Javascript 中的 Foundation 小/大使用情况答案

【问题标题】：Detect Foundation Small/Large Usage in Javascript检测 Javascript 中的 Foundation 小/大使用情况
【发布时间】：2013-07-01 21:32:09
【问题描述】：

有没有办法使用 Javascript 检测 Foundation grid 是处于“小”模式还是“大”模式？

【问题讨论】：

标签： javascript zurb-foundation

【解决方案1】：

是的，你可以像这样创建一个函数：

var isLarge, isMedium, isSmall;

isSmall = function() {
  return matchMedia(Foundation.media_queries['small']).matches && !matchMedia(Foundation.media_queries.medium).matches;
};

isMedium = function() {
  return matchMedia(Foundation.media_queries['medium']).matches && !matchMedia(Foundation.media_queries.large).matches;
};

isLarge = function() {
  return matchMedia(Foundation.media_queries['large']).matches;
};

然后这样称呼它：

if (isSmall()) {
  alert("Too small!");
}

if (isLarge()) {
  alert("Too big!");
}

if (isMedium()) {
  alert("Just right!");
}

另一种非特定于基础的方式：

在您的 CSS 媒体查询中仅适用于小型（调整以适应）：

@media only screen and (max-width: 40.063em) {
  body:after {
    content: 'small';
    display: none;
  }
}

在您的 Javascript 中，使用函数来获取该元素的内容并进行比较：

var getSize;

getSize = function() {
  return window.getComputedStyle(document.body, ':after').getPropertyValue('content');
};

在某些浏览器中，getSize() 将返回一个被引用的值，因此使用 if (getSize() == "small") 不起作用。您可以通过使用它进行比较来解决这个问题：

if (getSize().indexOf("small") !== -1) {
  // do something
}

此方法归功于此博客文章：http://adactio.com/journal/5429/

【讨论】：

好极了，发现这些功能非常有用。

【解决方案2】：

处理媒体查询的默认 Foundation5 方法是：

// Small queries
Foundation.utils.is_small_only();
Foundation.utils.is_small_up();

// Medium queries
Foundation.utils.is_medium_only();
Foundation.utils.is_medium_up();

// Large queries
Foundation.utils.is_large_only();
Foundation.utils.is_large_up();

// XLarge queries
Foundation.utils.is_xlarge_only();
Foundation.utils.is_xlarge_up();

// XXLarge queries
Foundation.utils.is_xxlarge_only();
Foundation.utils.is_xxlarge_up();

请参阅http://foundation.zurb.com/docs/javascript-utilities.html 下的“媒体查询”。

【讨论】：

易于使用 jQuery 的window.onresize = function(event) {}

【解决方案3】：

其实还有更好的办法：

if (Foundation.MediaQuery.atLeast('medium')) {
// True if medium or large
// False if small
}

更多信息here。

【讨论】：

同意，好多了。 F6 也可以使用console.log(Foundation.MediaQuery.current); // 'small', 'large', etc. 和if (Foundation.MediaQuery.is('small only')) { // True if small // False if medium or large } 等等等等

【解决方案4】：

您可以使用 Responsive Bootstrap Toolkit 库，尽管它的名称如此，但它只适用于任何框架，包括 Foundation。对于 Foundation，检测断点如下所示：

(function($, viewport){

    viewport.use('Foundation');

    if( viewport.is('small') ) {
        console.log('Matching: small');
    }

    if( viewport.is('>=medium') ) {
        console.log('Matching: medium, large and xlarge');
    }

    // You can also create a listener with debouncing that will perform an action
    // whenever window size changes.
    $(window).resize(
        viewport.changed(function(){
            console.log('Current breakpoint:', viewport.current());
        })
    );

})(jQuery, ResponsiveBootstrapToolkit);

免责声明：我是上述库的作者。

【讨论】：