61

私は、私がやろうとしているプロジェクトのために Twitter Bootstrap API をいじり始めたところです。メイン ナビゲーションには 3 つの主要な要素が含まれています。

  • サイトナビ
  • ソーシャル リンク ナビゲーション
  • サイトフォームを検索

モバイル デバイスでサイトを表示するときに、折りたたみプラグインを使用して、サイト ナビゲーションと検索フォームを折りたたみます。モバイル ビューには 2 つのボタンがあり、クリックすると検索フォームまたはメイン ナビゲーションのオン/オフが切り替わります。

しかし、検索フォームをオフにしてブラウザのサイズをデスクトップ ビューに変更すると、検索フォームはこのビューにまだ表示されません。

visible-mobile などのクラスの使用について読んだことがありますが、これらは折りたたみプラグインと衝突するようです。また、これを修正するために独自の CSS ハックを作成できる可能性があることも認識していますが、もっと簡単な解決策があるかどうか尋ねてみようと思いました。

Bootstrap には、表示、表示、非表示、および非表示のイベントがあるため、特定のデバイス ビューごとにこれらのアイテムを表示または非表示にするカスタム JS を記述できるのではないかと考えました。ただし、その時点で使用しているデバイスを検出する方法がわかりませんでした。

考え？

前もって感謝します

4

7 に答える 7

162

現在の環境を知りたい場合は、Bootstrap 独自の CSS クラスを使用してみてください。要素を作成し、ページに追加し、そのヘルパー クラスを適用し、非表示になっているかどうかを確認して、それが現在の環境かどうかを判断します。次の関数はまさにそれを行います。

ブートストラップ 4

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

    let el = document.createElement('div');
    document.body.appendChild(el);

    let curEnv = envs.shift();

    for (let env of envs.reverse()) {
        el.classList.add(`d-${env}-none`);

        if (window.getComputedStyle(el).display === 'none') {
            curEnv = env;
            break;
        }
    }

    document.body.removeChild(el);
    return curEnv;
}

ブートストラップ 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;
        }
    }
}

ブートストラップ 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;
        }
    }
}
于 2013-03-01T04:15:57.203 に答える
3

私の答えは、@ Raphael_ によって提示されたものと同様のメカニズムを使用することですが、それを使用してもう少し多くのことができます。詳細についてはこの回答を参照し、最新バージョンについてはプロジェクトのgithub リポジトリを参照してください。

ブレークポイント検出の例:

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

ウィンドウのサイズ変更時にコードを実行する (ミリ秒のスパン内で複数回発生することなく):

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

      // do some other stuff!

    })
});
于 2014-06-06T16:21:07.753 に答える
-1

上記の回答を組み合わせると、これは私にとってはうまくいきます：

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

    // Need to add &nbsp; 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';
}
于 2013-11-07T20:10:22.903 に答える