자바 스크립트에서 장치 너비 가져 오기

자바 스크립트를 사용하여 뷰포트 너비와 달리 사용자 장치 너비를 얻는 방법이 있습니까?

CSS 미디어 쿼리는 이것을 제공합니다.

@media screen and (max-width:640px) {
    /* ... */
}

과

@media screen and (max-device-width:960px) {
    /* ... */
}

가로 방향으로 스마트 폰을 타겟팅 할 때 유용합니다. 예를 들어 iOS에서 max-width:640pxwill 선언은 iPhone 4에서도 가로 모드와 세로 모드를 모두 대상으로합니다. 제가 말할 수있는 한 Android에는 해당되지 않으므로이 인스턴스에서 device-width를 사용하면 두 방향을 모두 성공적으로 대상으로 지정합니다. 데스크톱 기기를 타겟팅하지 않고

그러나 장치 너비를 기반으로 javascript 바인딩을 호출하는 경우 뷰포트 너비 테스트로 제한되는 것으로 보입니다. 이는 다음과 같이 추가 테스트를 의미합니다.

if ($(window).width() <= 960 && $(window).height <= 640) { /* ... */ }

CSS에서 장치 너비를 사용할 수 있다는 힌트를 감안할 때 이것은 나에게 우아하지 않은 것 같습니다.

screen.width 속성을 통해 장치 화면 너비를 얻을 수 있습니다.
때로는 창 크기가 장치 화면 크기보다 작은 데스크톱 브라우저를 다룰 때 화면 너비 대신 window.innerWidth (일반적으로 모바일 장치에서 찾을 수 없음)를 사용하는 것이 유용 할 수도 있습니다.

일반적으로 모바일 장치 및 데스크톱 브라우저를 다룰 때 다음을 사용합니다.

 var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;

Bryan Rieger의 유용한 답변에 대한 한 가지 문제는 고밀도 디스플레이에서 Apple 장치는 screen.width를 딥으로보고하는 반면 Android 장치는 물리적 픽셀로보고한다는 것입니다. ( http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html 참조 ) if (window.matchMedia('(max-device-width: 960px)').matches) {}matchMedia를 지원하는 브라우저에서 사용 하는 것이 좋습니다 .

방금이 아이디어가 있었기 때문에 근시안적 일 수도 있지만 잘 작동하는 것 같고 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가 독립적으로 작동 할 수 있다는 것입니다.

var width = Math.max(window.screen.width, window.innerWidth);

이것은 대부분의 시나리오를 처리합니다.

당신은 사용해야합니다

document.documentElement.clientWidth

브라우저 간 호환성으로 간주되며 jQuery (window) .width (); 사용합니다.

자세한 내용은 https://ryanve.com/lab/dimensions/를 참조하십시오.

사용하는 window.devicePixelRatio것이 window.matchMedia솔루션 보다 더 우아 하다고 생각 합니다.

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
}

https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

당신은 쉽게 사용할 수 있습니다

document.documentElement.clientWidth

Lumia 전화는 잘못된 screen.width를 제공합니다 (적어도 에뮬레이터에서). 그렇다면 Math.min(window.innerWidth || Infinity, screen.width)모든 장치에서 작동할까요?

또는 더 미친 것 :

for (var i = 100; !window.matchMedia('(max-device-width: ' + i + 'px)').matches; i++) {}
var deviceWidth = i;

Ya mybe u는 document.documentElement.clientWidth를 사용하여 클라이언트의 장치 너비를 얻고 setInterval에 넣어 장치 너비를 계속 추적 할 수 있습니다.

처럼

setInterval(function(){
        width = document.documentElement.clientWidth;
        console.log(width);
    }, 1000);

FYI와 마찬가지로 CSS에 설정된 최대 너비를 감지하고 <=, <,>,> = 및 == 기호를 사용하여 JS if-else 조건에서 사용할 수있는 중단 점 이라는 라이브러리 가 있습니다. 나는 그것이 매우 유용하다는 것을 알았습니다. 페이로드 크기는 3KB 미만입니다.