JavaScript로 실제 장치 너비를 어떻게 얻을 수 있나요?

JavaScript에서 장치 너비 결정

소개

반대로 장치의 실제 너비 캡처 뷰포트 너비는 JavaScript 개발의 일반적인 요구 사항입니다. CSS 미디어 쿼리는 max-device-width 속성을 통해 이 기능을 제공합니다. 그러나 이 기능을 JavaScript에 연결하는 것은 여전히 ​​어려운 일입니다.

장치 너비와 뷰포트 너비

뷰포트 너비는 브라우저 창 내에서 페이지의 표시되는 부분과 관련됩니다. 반면에 장치 너비는 장치의 전체 실제 화면 크기를 나타냅니다. 이러한 구별은 반응형 디자인을 만들 때, 특히 스마트폰을 가로 방향으로 수용할 때 매우 중요합니다.

JavaScript 솔루션

JavaScript로 장치 너비를 얻으려면 화면을 사용하세요. width 속성:

var deviceWidth = screen.width;

경우에 따라, 특히 데스크톱 브라우저의 경우 window.innerWidth가 더 정확한 너비를 제공할 수 있습니다. 측정:

var windowWidth = window.innerWidth;

데스크톱 브라우저와 모바일 장치가 모두 관련된 시나리오의 경우 포괄적인 솔루션은 두 측정을 결합하는 것입니다.

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

이 접근 방식은 장치에 관계없이 올바른 장치 너비를 보장합니다. 또는 브라우저 유형.

위 내용은 JavaScript로 실제 장치 너비를 어떻게 얻을 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!