자바 스크립트에서 기기 너비를 가져옵니다.

자바 스크립트에서 기기 너비를 가져옵니다.

---

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

내가 말할 수 있듯이 CSS 미디어 쿼리는 이것을 제공합니다.

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

과

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

가로 방향으로 스마트 폰을 대상으로하는 경우에 유용합니다. 예를 들어 iOS에서의 선언은 max-width:640pxiPhone 4에서도 가로 및 세로 모드를 모두 대상으로합니다. 이것은 내가 말할 수있는 한 Android의 경우에는 해당되지 않으므로이 경우 장치 너비를 사용하면 두 방향을 성공적으로 대상으로합니다. 데스크톱 기기를 타겟팅하지 않고

그러나 장치 너비를 기준으로 자바 스크립트 바인딩을 호출하는 경우 뷰포트 너비를 테스트하는 것으로 제한됩니다. 이는 다음과 같은 추가 테스트를 의미합니다.

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

CSS에 장치 너비를 사용할 수 있다는 힌트가 있으면 나에게 우아하지 않습니다.

---

screen.width 속성을 통해 장치 화면 너비를 얻을 수 있습니다.
창 크기가 종종 장치 화면 크기보다 작은 데스크탑 브라우저를 처리 할 때 화면 너비 대신 window.innerWidth (일반적으로 모바일 장치에서는 발견되지 않음)를 사용하는 것도 유용합니다.

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

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

---

Bryan Rieger의 유용한 답변 중 하나는 고밀도 디스플레이에서 Apple 장치가 화면 폭을 딥 단위로보고하고 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 미디어 쿼리를 사용하면이 요소에 대한 컨텐츠 속성 (예 : "대형"또는 "모바일"등)이 변경됩니다 (위와 동일한 기본 미디어 쿼리 방식이지만 'max-width'대신 css 'content'속성 설정).
3. $('#breakpoint-indicator').css('content');미디어 쿼리에서 content 속성을 설정 한 내용에 따라 "large"또는 "mobile"등을 반환 하는 js 또는 jquery (jquery eg )를 사용하여 css content 속성 값을 가져옵니다.
4. 현재 값에 따라 행동하십시오.

이제 sass에서와 동일한 중단 점 이름 (예 : sass : @include respond-to(xs)및 js)을 사용할 수 if ($breakpoint = "xs) {}있습니다.

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

---

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

대부분의 시나리오를 처리해야합니다.

---

I think using window.devicePixelRatio is more elegant than the window.matchMedia solution:

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

---

check it

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

---

Lumia phones give wrong screen.width (at least on emulator). So maybe Math.min(window.innerWidth || Infinity, screen.width) will work on all devices?

Or something crazier:

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

---

you can easily use

document.documentElement.clientWidth

참고URL : https://stackoverflow.com/questions/6850164/get-the-device-width-in-javascript