jquery 해상도 window.width가 미디어 쿼리에 설정된 뷰포트 너비보다 작은 이유는 무엇입니까?




부트스트랩 미디어쿼리 (6)

scrollbar's IT 때문입니다.

가장 정확한 해결책은 미디어 쿼리를 사용하여 실제 창 크기를 Javascript로 전달하는 것입니다. 다음 단계를 따라야합니다.

  • 페이지에 숨겨진 요소를 추가하십시오.
  • 미디어 쿼리를 사용하여 해당 요소의 max-width 속성을 변경합니다.
  • Javascript를 통해 해당 요소의 max-width 속성을 다시 읽습니다.

예를 들어, 다음 요소를 페이지에 추가하십시오.

<div id="currentMedia"></div>

그런 다음 다음 CSS 규칙을 작성하십시오.

#currentMedia {
    display: none;
}

@media (max-width: 720px) {
    // Make arrows in the carousel disappear...

    #currentMedia {
        max-width: 720px;
    }
}

그런 다음 Javascript 측면에서 다음과 같이 작성할 수 있습니다.

if (parseInt(jQuery("#currentMedia").css("max-width"), 10) <= 720) {
    // Code HERE..
}

그리고 스크롤바 크기에 상관없이 정확할 것입니다. 그 이유는 컨베이어가 실종 된 것과 동일한 미디어 쿼리에서 나온 값이기 때문입니다.

최근의 모든 주요 브라우저에서이 솔루션을 테스트했으며 정확한 결과를 제공합니다.

quirksmode.org에서이 페이지의 어떤 브라우저 에서 어떤 속성이 지원되는지에 대한 요약 정보를 찾을 수 있습니다.

최선의 방법은 페이지의 요소를 잡는 것입니다 (지원되는 경우 document.body 또는 document.getElementById 등). offsetParent 체인을 따라 맨 위의 요소를 찾은 다음 해당 요소의 clientWidth 및 clientHeight를 검사하십시오.

innerWidth 문서

.innerWidth() 메서드는 windowdocument 객체에는 적용 할 수 없습니다. 대신 .width() 사용하십시오.

나는 아주 당황 스럽다. 그리고 이것을 적절한 말로 설명하는 방법을 여전히 확신 할 수 없다. 지금까지 Breakpoint를 사용하여 미디어 쿼리를 사용하고 설정했습니다. 사용 된 브레이크 포인트 변수는 다음과 같습니다 :

$menustatictofixed: min-width 900px;

$ breakpoint-to-ems가 true로 설정됩니다. 다음 jQuery 스 니펫의 픽셀 값을 기반으로 모든 중단 점 변수가있는 페이지를 배치했습니다.

$('body').append('<div style="position: fixed; bottom: 0; right: 0; display: inline-block; font-weight: bold; padding: 5px 7px; border-radius: 5px 0 0 0; background: green; color: white; z-index: 9999;">Viewport width <span id="width"></span> px</div>');
var viewportWidth = $(window).width()
$('#width').text(viewportWidth);
$(window).resize(function() {
  var viewportWidth = $(window).width();
    $('#width').text(viewportWidth);
});

모든 것이 적절하고 깨끗하게 보입니다. 그러나 지난 1, 2 일 동안 나는 패턴에 대한 마지막 중단 점을 설정하고 일들을 예측할 수있는 문제를 낳았습니다. 어쨌든 논리적으로 의심 스럽지만 처음에는 깨끗하고 멋지게 정리 된 것처럼 보이는 것들은 실제로 부적절하고 어쩐지 엉망입니다. Cuz 다음 screenshot 보면 Chrome의 경우 윈도우의 너비가 window.width를 사용하는 jQuery 스 니펫의 너비와 다릅니다. window.width를 window.innerWidth로 대체하면 결국 스크롤바를 배제하면 차이가 없습니다. 적절한 결과를 얻는 유일한 방법은 방정식에 15 픽셀을 추가하는 것입니다.

var viewportWidth = $(window).width() + 15;

전체 방정식에서 유일한 문제는 window.width가 잘못된 함수 선택이고 document.documentElement.clientWidth 또는 다른 것과 같이 사용하는 것이 더 낫겠습니까 ...? 그리고 위의 15 개 픽셀이 어떤 해킹 방법으로 해결 되었는가? 베스트 안부 랄프


@ Snugugs의 대답과 유사하지만 내 사용 사례에 더 효과적입니다.

CSS (참고 : 저는 LESS를 사용하므로 @tabletMin과 @desktopMin은 내가 다른 곳에서 설정 한 중단 점 변수로 변환됩니다 :

    #cssWidth {
        display:none;
        content:'mobile';
    }

    /* Responsive styles (Tablet) */
    @media (min-width: @tabletMin) {
        #cssWidth {
            content:'tablet';
        }
        /* Other tablet CSS... */
    }
    /* Responsive styles (Desktop) */
    @media (min-width: @desktopMin) {
        #cssWidth {
            content:'desktop';
        }
        /* Other Desktop CSS... */
    }

그리고 JS에서 :

    getView = function() {
        // If #cssWidth element does not exist, create it and prepend it do body
        if ($('#cssWidth').length === 0) {
            $('body').prepend($(document.createElement('div')).attr('id', 'cssWidth'));
        }
        // Return the value of the elements 'content' property
        return $('#cssWidth').css('content');
    };

getView () 함수는 미디어 쿼리에서 보는 너비에 따라 '모바일', '태블릿'또는 '데스크톱'문자열을 반환합니다.

이것은 더 많은 뷰포트 너비에 맞도록 확장 될 수 있으며 CSS에 다른 값을 가진 규칙을 추가하기 만하면됩니다.


본문의 클래스를 사용하여 픽셀을 사용하는 대신 모바일, 태블릿 또는 데스크톱에 있는지 정의하십시오.

나를 위해 그것은 document.body.clientWidth 또는 innerWidth 작동하지 않았다. 내 js 코드가 다음 문장을 수행해야하더라도 내 기능이 1023-1040px 사이에서 충돌합니다.

if($(window).width()<1024)

해결책은 1024 이하의 새로운 클래스를 바디에 넣고 "작은 입술"이라고 이름을 짓고 픽셀 확인 대신 코드에서 사용하는 것이 었습니다.

if($(body).hasClass('small-res')) 

나는 너에게 그것도 추천한다.


@Snugug의 대답은 이것이 왜 일어나고 있는지에 대한 좋은 설명을 주며, @TusharGupta는 mediaquery가 너비를 자바 스크립트로 감지했음을 나타내는 좋은 해결책이 있습니다. 해결책 아래에서 javascript로 감지 된 너비를 사용하여 레이아웃 변경을 트리거하여 다른 방향으로 이동합니다.

미디어 쿼리를 자바 스크립트 픽셀 너비 감지와 동기화해야하는 경우 문제를 해결하는 한 가지 방법은 자바 스크립트로 추가 한 클래스를 기반으로 CSS 레이아웃 변경을 트리거하는 것입니다.

따라서 미디어 쿼리를 작성하는 대신 클래스 아래에 중첩 된 선언을 작성하십시오.

html.myMobileBP { ... }

그리고 자바 스크립트 / jQuery에서 다음과 같이이 클래스를 추가하십시오.

if ($(window).width() < myMobileBPPixelSize) {
    $("html").addClass("myMobileBP");
}

이를 더욱 발전 시키려면 자바 스크립트 지원 부족을 고려해야합니다. 또한 html.no-js 클래스에 래핑 된 mediaqueries를 정의한 다음 javascript로 .no-js 클래스를 제거하고 javascript 클래스를 통해 중단 점을 추가하는 위의 솔루션을 적용합니다.


대답은 스크롤 막대이며 솔루션은 까다 롭습니다.

미디어 쿼리는 흥미 롭습니다. 브라우저에서 정확히 동일하게 작동하지 않으므로 사용이 쉽지 않을 수 있습니다. 예를 들어, OS X의 -webkit / -blink 및 Win8의 IE10에서는 스크롤바가 페이지에 오버레이됩니다. 그러나 -moz에서는 스크롤 막대가 페이지에 중첩 되지 않습니다 . 페이지의 "가시 영역"을 얻는 가장 좋은 방법은 다음과 같은 바닐라 자바 ​​스크립트 행입니다 (올바른 HTML 문서가 있다고 가정).

document.body.parentNode.clientWidth

이것이 무엇을 할 것인가는 body 엘리먼트를 찾고, 부모 엘리먼트 ( html 엘리먼트가 될 유효한 문서에서)를 찾은 다음 렌더링 후에 너비를 찾는다. 이것은 당신이보고 싶어하는 폭을 줄 것입니다. 그것은 또한 쓸모없는 너비 입니다.

왜, 실제 클라이언트 너비가 쓸모 없냐고 묻는다면 어떨까요? 브라우저마다 다르므로 아닙니다. width 미디어 쿼리가 실제로 테스트하는 것이 아니기 때문입니다! 어떤 미디어 width 쿼리 window.innerWidth 인지 테스트합니다. 이것은 현재 당신이 본질적으로 사용하고있는 것입니다.

그렇다면이 문제의 해결책은 무엇입니까? 솔루션은 장치 기반 미디어 쿼리 대신 콘텐츠 기반 미디어 쿼리를 사용하고 쿼리의 일부 흔들림 공간에서 확인하는 것입니다 (특히 흔들림 공간이 약 15px ). 아직 작성하지 않았다면 Vexing ViewportPixel Identity Crisis 기사를 읽고 MQ 정의에서 잠재적 인 15px shimmer가 왜 세계에서 최악의 것이 아닌지에 대한 아이디어를 얻으십시오 (튀기는 물고기가 더 많을 수 있음) .

결론적으로 $breakpoint-to-ems: true 계속 사용하고 콘텐츠가 window.innerWidth 로 깨지는 시점을 기준으로 미디어 쿼리를 선택하는 것이 브라우저 간 문제를 처리하는 유일한 방법입니다. 다양한 이슈를 한 눈에 볼 수 있듯이, 대부분의 브라우저와 OS가 오버레이 스크롤바로 이동하는 것처럼 보입니다. (OS X 브라우저마다 Firefox 24 에서 우분투의 Unity UI 가 제공됩니다. ) 스크롤 막대에 대해 걱정하지 말고 브라우저에서 약간 다른 사이트를 확인해보십시오. 에단 마르코트 (Eman Marcotte)가 다음과 같이 설득력있게 말한 것처럼 기억하십시오.

웹은 본질적으로 불안정한 매체이다.


이것은 나를 위해 일한 것입니다 : CSS 미디어 쿼리와 자바 스크립트 창 너비가 일치하지 않습니다 .

$(window).width(); 스크롤바를 포함한 내부 폭은 다음과 같습니다.

function viewport() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

var vpWidth = viewport().width; // This should match your media query




breakpoint-sass