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

186

프로젝트에서 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 인 것은 아닙니다.

jquery  css  twitter-bootstrap  media-queries 
— Pattle
소스
1
if ($ ( 'html'). width () <= 767) {// 무언가를
— 하세요
@Vaibs_Cool 제안에 감사하지만 여전히 같은 결과를 얻습니다
— Pattle
— Ignitor
여기에 대답하십시오 [여기에 링크 설명을 입력하십시오] [1] [1] : stackoverflow.com/questions/11309859/…
— Rantiev
"$ (window) .width ()"대신 "document.documentElement.clientWidth"가 제대로 작동합니까? 편집 : 내 실수는 Vaibs_Cool의 답변을 보았습니다.
— joshhunt

답변:

293

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 {
    //...
}
— 아우시
소스
8
Modernizr 라이브러리를 사용할 여유가 있다면 이것이 가장 좋은 대답입니다.
— richsinn
1
이 솔루션이 더 좋습니다 : stackoverflow.com/a/19292035/1136132 (두 번째 코드). JS 만.
— joseantgv
@joseantgv 내 솔루션도 js 전용입니다. 연결된 솔루션이 더 나은 이유를 설명 할 수 있습니까?
— ausi
2
@edwardm Modernizr.mq은 부울 값만 반환하므로 onresize이벤트 핸들러 에서 직접 호출해야 합니다.
— ausi
2
@Bernig window.matchMedia는 리플 로우를 트리거하지 않기 때문에 권장되는 방법입니다 . 함수 호출 빈도에 따라 성능 문제가 발생할 수 있습니다. Modernizr을 직접 사용하지 않으려면 src / mq.js 및 src / injectElementWithStyles.js 에서 소스 코드를 복사 할 수 있습니다 .
— ausi
175

미디어 쿼리가 변경되는 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;
    }
}
— 궁둥이
소스
9
그것은 다른 답변에서 언급 한 JS 해킹보다 더 우아한 솔루션입니다.
— René Roth
3
+1 이것은 영리하다. 중단 점을 변경하려면 javascript가 아닌 CSS를 변경하면됩니다.
— JoeMoe1984
이 솔루션은 잘 작동하며 가장 투표가 많은 답변에서 제안 된 자바 스크립트 핵보다 더 우아합니다.
— Andrés Meza-Escallón
2
부트 스트랩을 사용하면 CSS없이 할 수 있습니다<div id="xs-indicator" class="xs-visible">
— Čamo
33

이 원인 일 수 있습니다 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' ] };
}

위의 코드 소스

— 로한 쿠마르
소스
감사. 이것은 작동하지만 어쨌든 jquery를 사용하여 스크롤 막대의 너비를 포함 할 수 있습니다. 스크롤 막대의 너비가 다른 브라우저에서 변경 될 수 있다고 생각하고 있습니까?
— Pattle
1
예 사용 innerWidth()하거나 같이 사용할 수 있습니다 $('body').innerWidth();참조이 stackoverflow.com/questions/8339377/...
— 로한 쿠마
3
당신은 .width ()가 잘못을 반환 window.innerWidth 아닌 jQuery를 $ (창) 개체에, $ (창)을 의미
— EJanuszewski
1
window.innerWidthOSX 시스템 환경 설정에서 스크롤바가 활성화 된 경우 Safari 8의 CSS 미디어 쿼리와 일치하지 않습니다.
— ausi
10

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

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' ] };
}
— 란 티에프
소스
4

문서 너비를 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

나는 최근에 같은 문제에 직면했다-부트 스트랩 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");
— 사용자
소스
3

사용하다

window.innerWidth

이것은 내 문제를 해결했다

— 사용자
소스
3

다음은 CSS를 통해 무언가를 변경하고 Javascript를 통해 읽는 방법에 의존하는 앞에서 언급 한 방법의 대안입니다. 이 방법은 window.matchMediaModernizr이 필요하지 않습니다 . 또한 추가 HTML 요소가 필요하지 않습니다. HTML 의사 요소를 사용하여 중단 점 정보를 '저장'하여 작동합니다.

body:after {
  visibility: hidden;
  height: 0;
  font-size: 0;
}

@media (min-width: 20em) {
  body:after {
    content: "mobile";
  }
}

@media (min-width: 48em) {
  body:after {
    content: "tablet";
  }
}

@media (min-width: 64em) {
  body:after {
    content: "desktop";
  }
}

내가 사용하는 body예를 들어, 당신은이에 대한 모든 HTML 요소를 사용할 수 있습니다. content의사 요소에 원하는 문자열이나 숫자를 추가 할 수 있습니다 . '모바일'일 필요는 없습니다.

이제 다음과 같은 방법으로 Javascript에서이 정보를 읽을 수 있습니다.

var breakpoint = window.getComputedStyle(document.querySelector('body'), ':after').getPropertyValue('content').replace(/"/g,'');

if (breakpoint === 'mobile') {
    doSomething();
}

이렇게하면 중단 점 정보가 CSS에서 직접 제공되므로 Javascript를 통해 올바른 화면 너비를 얻는 데 어려움을 겪지 않아도되기 때문에 항상 정확한 정보를 얻을 수 있습니다.

— dschenk
소스
당신은 사용할 필요가 없습니다 querySelector()나 getPropertyValue(). 정규 표현식에서 작은 따옴표를 찾을 수도 있습니다 (일관되지 않기 때문에). 이것은 : window.getComputedStyle(document.body, ':after').content.replace(/"|'/g, ''). 그리고 조금 덜 비싸게 만들기 위해 ._debounce()~ 100ms 대기 로 밑줄 / lodash 로 래핑 할 수 있습니다 . 마지막으로 <html>에 attrib를 추가하면 툴팁 disable 절과 같이 vars 외부의 raw 플래그 / 데이터를 찾는 출력을 사용할 수 있습니다. 예 : gist.github.com/dhaupin/f01cd87873092f4fe2fb8d802f9514b1
— dhaupin
2

Javascript는 뷰포트 너비를 확인하는 여러 가지 방법을 제공합니다. 알다시피 innerWidth에는 툴바 너비가 포함되어 있지 않으며 툴바 너비는 시스템마다 다릅니다. 툴바 너비를 포함하는 outerWidth 옵션 도 있습니다 . 모질라 자바 스크립트 API의 상태 :

Window.outerWidth는 브라우저 창의 외부 너비를 가져옵니다. 사이드 바 (확장 된 경우), 창 크롬 및 창 크기 조정 테두리 / 핸들을 포함하여 전체 브라우저 창의 너비를 나타냅니다.

자바 스크립트의 상태는 모든 플랫폼의 모든 브라우저에서 outerWidth에 대한 특정 의미에 의존 할 수없는 상태입니다.

outerWidth되어 잘 지원되지 오래된 모바일 브라우저 는 주요 데스크톱 브라우저에서 지원하고 대부분의 최신 스마트 폰 브라우저를 누리고 있지만.

ausi가 지적했듯이 matchMediaCSS가 더 표준화되어 있기 때문에 훌륭한 선택이 될 것입니다 (matchMedia는 JS가 감지하는 CSS를 사용하여 뷰포트 값을 읽습니다). 그러나 허용 된 표준을 사용하더라도이를 무시하는 지연된 브라우저가 여전히 존재합니다 (이 경우 IE <10이므로 XP가 종료 될 때까지 matchMedia가 그다지 유용하지 않습니다).

에서 요약 만 데스크톱 브라우저와 새로운 모바일 브라우저 개발하는 경우, outerWidth은 당신이 찾고있는 무엇을 제공해야합니다 몇 가지주의 .

— fzzylogic
소스
1

다음은 미디어 쿼리를 다루는 덜 트릭입니다. 크로스 브라우저 지원은 모바일 IE를 지원하지 않으므로 약간 제한적입니다.

     if (window.matchMedia('(max-width: 694px)').matches)
    {
        //do desired changes
    }

자세한 내용은 Mozilla 설명서 를 참조하십시오.

— 사용자
소스
1

이 시도 

getData(){
    if(window.innerWidth <= 768) {
      alert('mobile view')
      return;
    }

   //else function will work

    let body= {
      "key" : 'keyValue'
    }
    this.dataService.getData(body).subscribe(
      (data: any) => {
        this.myData = data
      }
    )
}
— DINESH 아디 카리
소스
0

항상 작동하며 CSS 미디어 쿼리와 동기화되는 해결 방법입니다.

본문에 div 추가

<body>
    ...
    <div class='check-media'></div>
    ...
</body>

특정 미디어 쿼리를 입력하여 스타일 추가 및 변경

.check-media{
    display:none;
    width:0;
}
@media screen and (max-width: 768px) {
    .check-media{
         width:768px;
    }
    ...
}

그런 다음 미디어 쿼리를 입력하여 변경중인 JS 검사 스타일

if($('.check-media').width() == 768){
    console.log('You are in (max-width: 768px)');
}else{
    console.log('You are out of (max-width: 768px)');
}

따라서 일반적으로 특정 미디어 쿼리를 입력하여 변경되는 스타일을 확인할 수 있습니다.

— 아르센 sky 스키 얀
소스
0

최고의 크로스 브라우저 솔루션은 Modernizr.mq를 사용하는 것입니다

링크 : https://modernizr.com/docs/#mq

Modernizr.mq를 사용하면 현재 브라우저 창 상태가 미디어 쿼리와 일치하는지 프로그래밍 방식으로 확인할 수 있습니다.

var query = Modernizr.mq('(min-width: 900px)');
if (query) {
   // the browser window is larger than 900px
}

참고 브라우저는 미디어 쿼리 (예 : 이전 IE)를 지원하지 않습니다. mq는 항상 false를 반환합니다.

— 산지 브 데브 나트
소스
0 
if(window.matchMedia('(max-width: 768px)').matches)
    {
        $(".article-item").text(function(i, text) {

            if (text.length >= 150) {
                text = text.substring(0, 250);
                var lastIndex = text.lastIndexOf(" ");     
                text = text.substring(0, lastIndex) + '...'; 
            }

            $(this).text(text);

        });

    }
— 아담 콜턴
소스
0

내가하는 일;

<body>
<script>
function getWidth(){
return Math.max(document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth);
}
var aWidth=getWidth();
</script>
...

나중에 어디서나 aWidth 변수를 호출하십시오.

스크롤바 너비를 계산하려면 getWidth ()를 문서 본문에 넣어야하며, 그렇지 않으면 브라우저의 스크롤바 너비를 getWidth ()에서 빼야합니다.

— 부르 쿨
소스
-1

구현 매끄러운 슬라이드 및 해상도에 따라 블록에 다른 수의 슬라이드 표시 (jQuery)

   if(window.matchMedia('(max-width: 768px)').matches) {
      $('.view-id-hot_products .view-content').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3,
        dots: true,
      });
    }

    if(window.matchMedia('(max-width: 1024px)').matches) {
      $('.view-id-hot_products .view-content').slick({
        infinite: true,
        slidesToShow: 4,
        slidesToScroll: 4,
        dots: true,
      });
    }
— 비탈리
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.