Twitter Bootstrap API를 사용하여 어떤 장치보기에 있는지 감지하는 방법은 무엇입니까?

Twitter Bootstrap API를 사용하여 어떤 장치보기에 있는지 감지하는 방법은 무엇입니까?

---

나는 내가 다가올 프로젝트를 위해 Twitter Bootstrap API를 가지고 놀기 시작했습니다. 기본 탐색에는 3 가지 주요 요소가 있습니다.

• 사이트 탐색
• 소셜 링크 탐색
• 사이트 양식 검색

모바일 장치에서 사이트를 볼 때 축소 플러그인을 사용하여 사이트 탐색 및 검색 양식을 축소하고 있습니다. 모바일보기에는 클릭하면 검색 양식 또는 기본 탐색을 켜고 끄는 2 개의 버튼이 있습니다.

그러나 검색 양식을 끄고 브라우저의 크기를 데스크톱보기로 조정하면 검색 양식이 여전히이보기에서 숨겨져 있습니까?

보이는 모바일 등의 클래스 사용에 대해 읽었지만 축소 플러그인과 충돌하는 것 같습니다. 나는 또한 이것을 고치기 위해 내 자신의 CSS 해킹을 작성할 수 있다는 것을 알고 있지만 더 쉬운 해결책이 있는지 물어볼 것이라고 생각했습니다.

Bootstrap에는 show, show, hide 및 hidden 이벤트가 있으므로 각 특정 장치보기에서 이러한 항목을 표시하거나 숨길 수있는 사용자 지정 JS를 작성할 수 있다고 생각했습니다. 그러나 당시 사용중인 장치를 감지하는 방법을 몰랐습니다.

생각?

미리 감사드립니다

---

현재 어떤 환경인지 알고 싶다면 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;
        }
    }
}

---

@Raphael_ 및 @ user568109의 답변을 기반으로 Bootstrap 3에서 Responsive가 이제 기본 제공됩니다.

Javascript에서 장치 유형을 감지하려면 Bootstrap의 Responsive 클래스를 사용하여 필요한 장치에만 표시되는 객체를 만듭니다. 그런 다음 :hidden속성을 확인하십시오 .

예:

1. <div>eXtra Small 기기보다 더 큰 기기에 표시되는 콘텐츠가없는 패널을 만듭니다 (@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 
   }
   

---

저는 원래 Bootstrap v.4.x 의 솔루션 인 여기에 답변을 게시했습니다 .

Twitter Bootstrap 4.1.x에 대한 JS 중단 점 감지

부트 스트랩 v.4.0.0 (최신 버전의 부트 스트랩 전 4.1.x는 ) 업데이트 도입 그리드 옵션을 탐지에 대한 기존의 개념은 직접 (참조 적용되지 않을 수 있으므로, 마이그레이션 지침 ) :

• 보다 세부적인 제어를 위해 sm아래 768px에 새로운 그리드 계층이 추가되었습니다 . 우리는 지금이 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 중단 점 감지

The latest Bootstrap v4-alpha and Bootstrap v4-beta had different approach on grid breakpoints, so here's the legacy way of achieving the same:

/**
 * 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;
}

I think it would be useful, as it's easy to integrate to any project. It uses native responsive display classes of the Bootstrap itself.

---

Original answer:
Based on @Alastair McCormack answer, I suggest you to use this code

<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>

Just add it in the end of your container div, you will get a simple dynamic information about current view.

Update (2019-03-03):
Previous code is not compatible with Bootstrap 4, since all hidden-* and visible-* classes have been removed. Here you have the new code you can use, compatible with both Bootstrap 3 and Bootstrap 4 versions (some credits goes to 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>

You can test it with this fiddle.

Please note that I included hidden-xl and visible-xl too, but I believe they are not really used by any Bootstrap version.

---

My answer is using similar mechanism like the one presented by @Raphael_ however, you can do a little bit more with it. Please refer to this answer for details and project's github repository for the most updated version.

Example of breakpoint detection:

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

Executing code on window resize (without it happening multiple times within a span of milliseconds):

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

      // do some other stuff!

    })
});

---

Niche case, but you can apply @Kar.ma's to a Mediawiki with Chameleon (bootstrap skin) installed. Pass the "results" of the DIV as a template argument, then test against that within the template.

---

Combining the answers from above, this one works for me:

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';
}

ReferenceURL : https://stackoverflow.com/questions/14441456/how-to-detect-which-device-view-youre-on-using-twitter-bootstrap-api