web-dev-qa-db-ja.com

Twitter Bootstrap APIを使用して、どのデバイスビューを表示しているかを検出する方法

Twitter Bootstrap私がやってくるプロジェクトのAPIをいじり始めました。メインnavには3つの主要な要素が含まれています。

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

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

ただし、検索フォームをオフに切り替えてからブラウザーのサイズをデスクトップビューに変更すると、このビューでは検索フォームがまだ非表示になりますか？

Visible-mobileなどのクラスの使用について読んだことがありますが、これらはcollapseプラグインと衝突するようです。私はおそらくこれを修正するために独自のCSSハックを書くことができると思いますが、もっと簡単な解決策があるかどうか尋ねると思いました。

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

考え？

前もって感謝します

javascripttwitter-bootstrapdevice-detection
55
James Howell

使用している環境を知りたい場合は、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;
        }
    }
}
148
rmobis

@Raphael_と@ user568109の回答に基づいて、Bootstrap 3で、Responsiveが組み込まれました。

Javascriptでデバイスタイプを検出するには、BootstrapのResponsiveクラスを使用して、必要なデバイスにのみ表示されるオブジェクトを作成します。次に、その:hiddenプロパティを確認します。

例：

  1. EXtra Smallデバイスよりも大きなものに表示されるコンテンツのない<div>パネルを作成します（@Mario Awadに感謝）：

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

    または、特定のデバイスを除外するには：

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

  2. #desktopTestの値を確認してください：

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

元の答え：
@ 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の最後に追加するだけで、現在のビューに関する簡単な動的情報を取得できます。

更新（2019-03-03）：
以前のコードは、Bootstrap 4、すべてのhidden-*およびvisible-*クラスは削除されました。 Bootstrap 3とBootstrap 4のバージョン（一部のクレジットは this SO answer ）：

<div class="visible-xs hidden-sm hidden-md hidden-lg hidden-xl d-block d-sm-none">xs</div>
<div class="hidden-xs visible-sm hidden-md hidden-lg hidden-xl d-none d-sm-block d-md-none">sm</div>
<div class="hidden-xs hidden-sm visible-md hidden-lg hidden-xl d-none d-md-block d-lg-none">md</div>
<div class="hidden-xs hidden-sm hidden-md visible-lg hidden-xl d-none d-lg-block d-xl-none">lg</div>
<div class="hidden-xs hidden-sm hidden-md hidden-lg visible-xl d-none d-xl-block">xl</div>

this fiddle でテストできます。

hidden-xlおよびvisible-xlも同じですが、Bootstrap=バージョンでは実際には使用されていません。

5
Kar.ma

私はもともと ここに回答を投稿 、Bootstrap v.4.xの解決策です。

TwitterのJSブレークポイント検出Bootstrap 4.1.x

Bootstrap v.4.0.0（および最新バージョンBootstrap 4.1.x）更新された grid options を導入したため、検出に関する古い概念が直接適用されない場合があります（ 移行手順 を参照）：

  • より細かく制御するために、768pxの下に新しいsmグリッド層を追加しました。 xs、sm、md、lg、およびxl;があります。
  • xsグリッドクラスは、中置記号を必要としないように変更されました。

更新されたグリッドクラス名と新しいグリッド層を尊重する小さなユーティリティ関数を作成しました。

/**
 * Detect the current active responsive breakpoint in Bootstrap
 * @returns {string}
 * @author farside {@link https://stackoverflow.com/users/4354249/farside}
 */
function getResponsiveBreakpoint() {
    var envs = {xs:"d-none", sm:"d-sm-none", md:"d-md-none", lg:"d-lg-none", xl:"d-xl-none"};
    var env = "";

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

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

Bootstrap v4-betaのJSブレークポイント検出

最新のBootstrap v4-alphaとBootstrap v4-betaには異なるアプローチがありましたグリッドブレークポイント上にあるので、同じことを実現する従来の方法を次に示します。

/**
 * Detect and return the current active responsive breakpoint in Bootstrap
 * @returns {string}
 * @author farside {@link https://stackoverflow.com/users/4354249/farside}
 */
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;
}

どのプロジェクトにも簡単に統合できるので便利だと思います。ネイティブの レスポンシブディスプレイクラス Bootstrap自体を使用します。

5
Farside

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

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

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

ウィンドウのサイズ変更でコードを実行する（ミリ秒の範囲内で複数回発生することなく）：

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

      // do some other stuff!

    })
});
3
Maciej Gurban

ニッチなケースですが、カメレオン（ブートストラップスキン）がインストールされているMediawikiに@ Kar.maを適用できます。 DIVの「結果」をテンプレート引数として渡し、テンプレート内でテストします。

0
Skonesam