복붙노트

[JQUERY] 미디어 쿼리와 같은 $ (창) .width () 동일하지

JQUERY

미디어 쿼리와 같은 $ (창) .width () 동일하지

해결법

  1. 1.당신은 IE9를 지원하지 않을 경우 당신은 window.matchMedia () (MDN 문서)를 사용할 수 있습니다.

    당신은 IE9를 지원하지 않을 경우 당신은 window.matchMedia () (MDN 문서)를 사용할 수 있습니다.

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

    window.matchMedia는 CSS 미디어 쿼리와 완벽하게 일치 브라우저 지원은 꽤 좋은 : http://caniuse.com/#feat=matchmedia

    당신은 당신이 모더 나이저의 MQ 방법을 사용할 수 있습니다 더 많은 브라우저를 지원해야하는 경우, 그것은 CSS 미디어 쿼리를 이해하는 모든 브라우저를 지원합니다.

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

  2. 2.미디어 쿼리를 변경하는 CSS 규칙을 확인합니다. 이것은 항상 작업에 보장됩니다.

    미디어 쿼리를 변경하는 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;
    }
}

  3. 3.대신 같은 폭 innerWidth를 사용으로 인해 스크롤 일 수 있습니다

    대신 같은 폭 innerWidth를 사용으로 인해 스크롤 일 수 있습니다

    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"));
}

    또한 같은 뷰포트를 얻을 수 있습니다

    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. 4.네, 스크롤 때문이다. 정답 소스 : 여기 링크 설명을 입력

    네, 스크롤 때문이다. 정답 소스 : 여기 링크 설명을 입력

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

  5. 5.그것은 JS-범위를하지 어쩌면 문서의 폭하지만 CSS를 @media 쿼리에 의해 변화의 어떤 종류의 더 나은 좋습니다. 이 방법을 사용하면 확신 할 수 JQuery와 기능과 CSS 변화가 동시에 발생합니다.

    그것은 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");
    ...
});

  6. 6.나는 최근에 같은 문제에 직면했다 - 또한 부트 스트랩 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");

  7. 7.사용하다

    사용하다

    이건 내 문제를 해결

  8. 8.다음은 CSS를 통해 뭔가를 변경하고 자바 스크립트를 통해 읽기에 의존 앞서 언급 한 방법에 대한 대안이다. 이 방법은 window.matchMedia 또는 모더 나이저를 필요로하지 않습니다. 또한 여분의 HTML 요소를 필요로하지 않는다. 그것은 '저장'중단 점 정보에 HTML 의사 요소를 사용하여 작동합니다 :

    다음은 CSS를 통해 뭔가를 변경하고 자바 스크립트를 통해 읽기에 의존 앞서 언급 한 방법에 대한 대안이다. 이 방법은 window.matchMedia 또는 모더 나이저를 필요로하지 않습니다. 또한 여분의 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";
  }
}

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

    이제 우리는 다음과 같은 방법으로 자바 스크립트에서이 정보를 읽을 수 있습니다 :

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

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

    우리는 항상 확인 중단 점 정보가 올바른지있는이 방법은 CSS에서 직접오고 있기 때문에 우리는 자바 스크립트를 통해 화면 오른쪽 폭을 얻기과 번거 로움 할 필요가 없습니다.

  9. 9.자바 스크립트는 뷰포트의 폭을 확인하는 하나 이상의 방법을 제공합니다. 당신이 발견으로, innerWidth 도구 모음의 폭을 포함하지 않습니다, 및 도구 모음의 폭은 시스템에서 다릅니다. 도구 모음의 폭을 포함됩니다 outerWidth 옵션도 있습니다. 모질라 자바 스크립트 API 상태 :

    자바 스크립트는 뷰포트의 폭을 확인하는 하나 이상의 방법을 제공합니다. 당신이 발견으로, innerWidth 도구 모음의 폭을 포함하지 않습니다, 및 도구 모음의 폭은 시스템에서 다릅니다. 도구 모음의 폭을 포함됩니다 outerWidth 옵션도 있습니다. 모질라 자바 스크립트 API 상태 :

    자바 스크립트의 상태는 하나가 모든 플랫폼에서 모든 브라우저에서 outerWidth에 대한 의미를 특정에 의존 할 수 있도록합니다.

    그것은 주요 데스크톱 브라우저에서 지원하고 대부분의 최신 스마트 폰 브라우저를 누리고 있지만 outerWidth은 물론, 나이가 모바일 브라우저에서 지원되지 않습니다.

    ausi는 지적 CSS가 더 나은 표준화로, matchMedia 좋은 선택이 될 것 (matchMedia는 CSS에 의해 검출 된 뷰포트 값을 읽어 JS를 사용한다). 그러나조차 ​​허용 기준, 지체 브라우저는 여전히 그 (matchMedia XP의 다이까지 적어도 매우 유용하지하게이 경우에 IE <10)을 무시 존재한다.

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

  10. 10.여기에 미디어 쿼리를 처리 할 수있는 덜 관여 트릭입니다. 크로스 브라우저 지원은 모바일 IE를 지원하지 않기 때문에 약간 제한입니다.

    여기에 미디어 쿼리를 처리 할 수있는 덜 관여 트릭입니다. 크로스 브라우저 지원은 모바일 IE를 지원하지 않기 때문에 약간 제한입니다.

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

    자세한 내용은 모질라의 설명서를 참조하십시오.

  11. 11.이 시도

    이 시도

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

  12. 12.항상 작동하고 CSS 미디어 쿼리와 동기화되어 해결.

    항상 작동하고 CSS 미디어 쿼리와 동기화되어 해결.

    몸에 사업부를 추가

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

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

  13. 13.가장 좋은 크로스 브라우저 솔루션은 Modernizr.mq을 사용하는 것입니다

    가장 좋은 크로스 브라우저 솔루션은 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를 반환합니다.

  14. 14.

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

        });

    }

  15. 15.내가하는 일;

    내가하는 일;

    <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 ()을 넣어해야합니다.

  16. 16.해상도에 따라 블록의 슬라이드 구현 매끄러운 슬라이더 표시 상이한 수 (jQuery를)

    해상도에 따라 블록의 슬라이드 구현 매끄러운 슬라이더 표시 상이한 수 (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,
      });
    }

  17. 17.이 시도

    이 시도

    if (document.documentElement.clientWidth < 767) {
   // scripts
}

    더 많은 참조 여기를 클릭

    18. from https://stackoverflow.com/questions/19291873/window-width-not-the-same-as-media-query by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 계속하기 전에 자바 스크립트 절전 / 대기 [중복]  (0) 2020.10.20
[JQUERY] 화면 너비 미만 960 픽셀 경우 무언가를  (0) 2020.10.20
[JQUERY] 어떻게 자바 스크립트에서 창 크기 조정 이벤트를 트리거하기 위해?  (0) 2020.10.20
[JQUERY] 뷰포트의 HTML5 캔버스 100 % 너비 높이?  (0) 2020.10.20
[JQUERY] DIV ID로 스크롤 부드러운 jQuery를  (0) 2020.10.20
,

티스토리툴바