[jquery] $ (window) .width ()는 미디어 쿼리와 동일하지 않습니다

Program / 글쓴이

프로젝트에서 Twitter Bootstrap을 사용하고 있습니다. 기본 부트 스트랩 스타일뿐만 아니라 내 자신의 일부를 추가했습니다.

//My styles
@media (max-width: 767px)
{
    //CSS here
}

또한 뷰포트의 너비가 767px보다 작을 때 페이지에서 특정 요소의 순서를 변경하기 위해 jQuery를 사용하고 있습니다. 

$(document).load($(window).bind("resize", checkPosition));

function checkPosition()
{
    if($(window).width() < 767)
    {
        $("#body-container .main-content").remove().insertBefore($("#body-container .left-sidebar"));
    } else {
        $("#body-container .main-content").remove().insertAfter($("#body-container .left-sidebar"));
    }
}

내가 겪고있는 문제는 계산 한 $(window).width()너비와 CSS에서 계산 한 너비가 같지 않다는 것입니다. 시 $(window).width()는 751으로 뷰포트의 폭은 그래서 16px의 다른있을 것 같습니다 수익률 767는 CSS 계산합니다.

누구나이 문제의 원인과 문제를 해결할 수있는 방법을 알고 있습니까? 사람들은 스크롤 막대의 너비를 고려하지 않고 사용하는 $(window).innerWidth() < 751것이 좋습니다. 그러나 이상적으로는 스크롤 막대의 너비를 계산하고 내 미디어 쿼리와 일치하는 솔루션을 찾고 싶습니다 (예 : 두 조건이 767 값을 비교하는 경우). 모든 브라우저에 스크롤 막대 너비가 16px 인 것은 아닙니다.

답변

IE9를 지원할 필요가 없다면 window.matchMedia()( MDN documentation )을 사용하면 됩니다.

function checkPosition() {
    if (window.matchMedia('(max-width: 767px)').matches) {
        //...
    } else {
        //...
    }
}

window.matchMediaCSS 미디어 쿼리와 완전히 일치하며 브라우저 지원은 상당히 좋습니다 : http://caniuse.com/#feat=matchmedia

최신 정보:

더 많은 브라우저를 지원해야하는 경우 Modernizr의 mq 메소드를 사용할 수 있으며 CSS의 미디어 쿼리를 이해하는 모든 브라우저를 지원합니다.

if (Modernizr.mq('(max-width: 767px)')) {
    //...
} else {
    //...
}

답변

미디어 쿼리가 변경되는 CSS 규칙을 확인하십시오. 이것은 항상 작동하도록 보장됩니다.

http://www.fourfront.us/blog/jquery-window-width-and-media-queries

HTML :

<body>
    ...
    <div id="mobile-indicator"></div>
</body>

자바 스크립트 :

function isMobileWidth() {
    return $('#mobile-indicator').is(':visible');
}

CSS :

#mobile-indicator {
    display: none;
}

@media (max-width: 767px) {
    #mobile-indicator {
        display: block;
    }
}

답변

이 원인 일 수 있습니다 scrollbar, 사용 innerWidth대신에 width같은

if($(window).innerWidth() <= 751) {
   $("#body-container .main-content").remove()
                                .insertBefore($("#body-container .left-sidebar"));
} else {
   $("#body-container .main-content").remove()
                                .insertAfter($("#body-container .left-sidebar"));
}

또한 당신은 viewport같은 얻을 수 있습니다

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

위의 코드 소스

답변

예, 스크롤바 때문입니다. 정답 소스 : 여기에 링크 설명을 입력하십시오

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

답변

문서 너비를 JS 범위로 지정하지 않고 css @media 쿼리로 변경 한 것이 더 좋습니다. 이 방법을 사용하면 JQuery 함수와 CSS 변경이 동시에 발생하는지 확인할 수 있습니다.

CSS :

#isthin {
    display: inline-block;
    content: '';
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media only screen and (max-width: 990px) {
    #isthin {
        display: none;
    }
}

jquery :

$(window).ready(function(){
    isntMobile = $('#isthin').is(":visible");
    ...
});

$(window).resize(function(){
    isntMobile = $('#isthin').is(":visible");
    ...
});

답변

나는 최근에 같은 문제에 직면했다-부트 스트랩 3에서도.

$ .width () 나 $ .innerWidth () 어느 것도 당신을 위해 작동하지 않습니다.

내가 생각해 낸 가장 좋은 해결책은 BS3에 맞게 조정 된 것 입니다. 요소 의 너비
를 확인하는 것 .container입니다.

.container요소의 작동 방식을 알고 있듯이
BS CSS 규칙에 의해 설정된 현재 너비를 제공하는 유일한 요소입니다.

그래서 그것은 같은

bsContainerWidth = $("body").find('.container').width()
if (bsContainerWidth <= 768)
    console.log("mobile");
else if (bsContainerWidth <= 950)
    console.log("small");
else if (bsContainerWidth <= 1170)
    console.log("medium");
else
    console.log("large");

답변

사용하다

window.innerWidth

이것은 내 문제를 해결했다