Ответ 1

Если вы хотите узнать, в какой среде вы работаете, попробуйте использовать собственные классы CSS Bootstrap. Создайте элемент, добавьте его на страницу, примените его вспомогательные классы и проверьте, скрыта ли она для определения текущей среды. Следующая функция использует jQuery для этого:

Bootstrap 3

function findBootstrapEnvironment() {
    var envs = ['xs', 'sm', 'md', 'lg'];

    var $el = $('<div>');
    $el.appendTo($('body'));

    for (var i = envs.length - 1; i >= 0; i--) {
        var env = envs[i];

        $el.addClass('hidden-'+env);
        if ($el.is(':hidden')) {
            $el.remove();
            return env;
        }
    }
}

Bootstrap 2

function findBootstrapEnvironment() {
    var envs = ['phone', 'tablet', 'desktop'];

    var $el = $('<div>');
    $el.appendTo($('body'));

    for (var i = envs.length - 1; i >= 0; i--) {
        var env = envs[i];

        $el.addClass('hidden-'+env);
        if ($el.is(':hidden')) {
            $el.remove();
            return env;
        }
    }
}

Ответ 2

Основываясь на ответах @Raphael_ и @user568109, в Bootstrap 3, теперь вступает в реакцию.

Чтобы определить тип устройства в Javascript, создайте объект, который отображается только на нужном устройстве, используя классы Bootstrap Responsive. Затем проверьте его свойство :hidden.

Пример:

• Создайте панель <div> без содержимого, которое будет отображаться на чем-нибудь большем, чем устройство eXtra Small (благодаря @Mario Awad):

  <div id="desktopTest" class="hidden-xs"></div>
  

  или, чтобы исключить определенные устройства:

  <div id="desktopTest" class="visible-sm visible-md visible-lg"></div>
  

• Проверить значение #desktopTest:

  if ($('#desktopTest').is(':hidden')) {
      // device is == eXtra Small
  } else {
      // device is >= SMaller 
  }
  

Ответ 3

Основываясь на ответе @Alastair McCormack, я предлагаю вам использовать этот код

<div class="visible-xs hidden-sm hidden-md hidden-lg">xs</div>
<div class="hidden-xs visible-sm hidden-md hidden-lg">sm</div>
<div class="hidden-xs hidden-sm visible-md hidden-lg">md</div>
<div class="hidden-xs hidden-sm hidden-md visible-lg">lg</div>

Просто добавьте его в конец вашего контейнера div, вы получите простую динамическую информацию о текущем виде.

Ответ 4

Я изначально написал ответ здесь, решение для Bootstrap v.4.

Bootstrap 4, обнаружение точки останова JS

/**
 * Detect and return the current active responsive breakpoint in Bootstrap
 * @returns {string}
 */
function getResponsiveBreakpoint() {
    var envs = ["xs", "sm", "md", "lg"];
    var env = "";

    var $el = $("<div>");
    $el.appendTo($("body"));

    for (var i = envs.length - 1; i >= 0; i--) {
        env = envs[i];
        $el.addClass("d-" + env + "-none");
        if ($el.is(":hidden")) {
            break; // env detected
        }
    }
    $el.remove();
    return env;
}

Ответ 5

Мой ответ использует аналогичный механизм, подобный тому, который представлен @Raphael_, однако вы можете немного поработать с ним. Подробнее см. этот ответ и выполните проект репозиторий github для самой обновленной версии.

Пример обнаружения точки останова:

if ( viewport.is('xs') ) {
  // do stuff in the lowest resolution
}

Выполнение кода при изменении размера окна (без его повторения в течение нескольких миллисекунд):

$(window).bind('resize', function() {
    viewport.changed(function() {

      // do some other stuff!

    })
});

Ответ 6

Bootstrap 4

(в настоящее время для Beta и, надеюсь, для версии Release также в будущем)

Это модифицированная версия, основанная на rmobis (Bootstrap 2/3) и Farside (Bootstrap 4)

/*
 * Detect and return the current active responsive breakpoint in Bootstrap 4
 *
 * @returns {string}
 * xs: Extra small (< 576px)
 * sm: Small (576px ≥ X < 768px)
 * md: Medium (768px ≥ X < 992px)
 * lg: Large (992px ≥ X < 1200px)
 * xl: Extra large (≥ 1200 px)
 */
function getResponsiveBreakpoint() {
    var envs = ["sm", "md", "lg", "xl"];
    var env = "";

    var $el = $("<div>");
    $el.appendTo($("body"));
    $el.addClass("d-block");
    for (var i = envs.length - 1; i >= 0; i--) {
        env = envs[i];
        $el.addClass("d-" + env + "-none");
        if ($el.is(":hidden")) {
            $el.remove();
            return env;
        }
    }
    $el.remove();
    return "xs";    //extra small
}

Ответ 7

Случай ниши, но вы можете применить @Kar.ma к Mediawiki с Chameleon (bootstrap skin). Передайте "результаты" DIV в качестве аргумента шаблона, затем протестируйте его в шаблоне.

Ответ 8

Объединив ответы сверху, это работает для меня:

function findBootstrapDeviceSize() {
  var dsize = ['lg', 'md', 'sm', 'xs'];
  for (var i = dsize.length - 1; i >= 0; i--) {

    // Need to add   for Chrome. Works fine in Firefox/Safari/Opera without it.
    // Chrome seem to have an issue with empty div's
    $el = $('<div id="sizeTest" class="hidden-'+dsize[i]+'">&nbsp;</div>');
    $el.appendTo($('body'));

    if ($el.is(':hidden')) {
      $el.remove();
      return dsize[i];
    }
  }

  return 'unknown';
}