방금이 아이디어가 있었기 때문에 근시안적 일 수도 있지만 잘 작동하는 것 같고 CSS와 JS간에 가장 일관성이있을 수 있습니다.

CSS에서 @media 화면 값에 따라 html의 최대 너비 값을 설정합니다.

@media screen and (max-width: 480px) and (orientation: portrait){

    html {
        max-width: 480px;
    }

    ... more styles for max-width 480px screens go here

}

그런 다음 JS (아마도 JQuery와 같은 프레임 워크를 통해)를 사용하여 html 태그의 최대 너비 값을 확인합니다.

maxwidth = $('html').css('max-width');

이제이 값을 사용하여 조건부 변경을 수행 할 수 있습니다.

If (maxwidth == '480px') { do something }

html 태그에 최대 너비 값을 입력하는 것이 무섭게 느껴진다면이 용도로만 사용되는 다른 태그를 추가 할 수 있습니다. 내 목적을 위해 html 태그는 잘 작동하고 내 마크 업에 영향을 미치지 않습니다.

Sass 등을 사용하는 경우 유용합니다 . px 값 대신 중단 점 이름과 같은 더 추상적 인 값을 반환하려면 다음과 같이 할 수 있습니다.

1. 중단 점 이름을 저장할 요소를 만듭니다. 예 : <div id="breakpoint-indicator" />
2. css 미디어 쿼리를 사용하면 “large”또는 “mobile”등과 같은이 요소의 콘텐츠 속성이 변경됩니다 (위와 동일한 기본 미디어 쿼리 접근 방식이지만 ‘max-width’대신 css ‘content’속성 설정).
3. js 또는 jquery (예 : jquery)를 사용하여 css 콘텐츠 속성 값을 $('#breakpoint-indicator').css('content');가져옵니다. 이는 미디어 쿼리에 의해 설정된 콘텐츠 속성에 따라 “large”또는 “mobile”등을 반환합니다.
4. 현재 가치에 따라 행동하십시오.

이제 sass에서 수행하는 것과 동일한 중단 점 이름 (예 : sass : @include respond-to(xs)및 js) 에서 작동 할 수 있습니다 if ($breakpoint = "xs) {}.

내가 특히 좋아하는 점은 내 중단 점 이름을 모두 css와 한곳 (변수 scss 문서)에서 정의 할 수 있고 내 js가 독립적으로 작동 할 수 있다는 것입니다.

답변

document.documentElement.clientWidth

if (window.innerWidth*window.devicePixelRatio <= 960
    && window.innerHeight*window.devicePixelRatio <= 640) {
    ...
}

const mq = window.matchMedia( "(min-width: 500px)" );

if (mq.matches) {
  // window width is at least 500px
} else {
  // window width is less than 500px
}