JavaScript로 화면 해상도를 감지하는 방법은 무엇입니까?

모든 브라우저에서 작동하는 방법이 있습니까?

원래 답변

예.

window.screen.availHeight
window.screen.availWidth

최신 정보2017-11-10

에서 쓰나미 코멘트에 :

모바일 장치, 즉 모바일 장치의 기본 해상도를 얻으려면 장치 픽셀 비율을 곱해야합니다 : window.screen.width * window.devicePixelRatio및 window.screen.height * window.devicePixelRatio. 이것은 또한 비율이 1 인 데스크톱에서도 작동합니다.

그리고 또 다른 대답으로 벤 으로부터 :

바닐라 JavaScript에서는 너비 / 높이를 사용할 수 있습니다.

window.screen.availHeight
window.screen.availWidth

절대 너비 / 높이에는 다음을 사용하십시오.

window.screen.height
window.screen.width

var width = screen.width;
var height = screen.height;

바닐라 자바 스크립트, 이것은 당신에게 줄 것이다 AVAILABLE 너비 / 높이 :

window.screen.availHeight
window.screen.availWidth

절대 너비 / 높이에는 다음을 사용하십시오.

window.screen.height
window.screen.width

위의 두 가지 모두 창 접두사없이 쓸 수 있습니다.

jQuery처럼? 이것은 모든 브라우저에서 작동하지만 각 브라우저는 다른 값을 제공합니다.

$(window).width()
$(window).height()

디스플레이 해상도 (예 : 인치당 72 도트) 또는 픽셀 크기 (브라우저 창이 현재 1000 x 800 픽셀 임)를 의미합니까?

화면 해상도를 통해 10 픽셀 선의 두께를 인치 단위로 알 수 있습니다. 픽셀 크기는 사용 가능한 화면 높이의 몇 퍼센트가 가로 10 픽셀 너비로 차지하는지 알려줍니다.

컴퓨터 자체는 일반적으로 화면의 실제 크기, 픽셀 수만 알지 못하므로 Javascript로만 디스플레이 해상도를 알 수있는 방법이 없습니다. 72 dpi는 일반적인 추측입니다 ....

디스플레이 해상도에 대해 많은 혼동이 있습니다. 사람들은 종종 픽셀 해상도 대신이 용어를 사용하지만 둘은 상당히 다릅니다. Wikipedia 참조

물론 cm 당 도트 수로 해상도를 측정 할 수도 있습니다. 사각형이 아닌 점의 모호한 주제도 있습니다. 그러나 나는 산만하다.

jQuery를 사용하면 다음을 수행 할 수 있습니다.

$(window).width()
$(window).height()

또한 브라우저 도구 모음 및 화면 크기를 피하면서 창 너비와 높이를 얻을 수 있습니다.

이렇게하려면 : window.innerWidth 및 window.innerHeight속성을 사용하십시오 . w3schools에서 참조하십시오 .

대부분의 경우, 예를 들어 완벽하게 중앙에 떠있는 부동 모달 대화 상자를 표시하는 것이 가장 좋은 방법입니다. 브라우저를 사용하는 해상도 방향 또는 창 크기에 관계없이 창에서 위치를 계산할 수 있습니다.

휴대 기기에서이 기능을 사용하려면 몇 가지 단계가 더 필요합니다. screen.availWidth장치의 방향에 관계없이 동일하게 유지됩니다.

모바일 솔루션은 다음과 같습니다.

function getOrientation(){
    return Math.abs(window.orientation) - 90 == 0 ? "landscape" : "portrait";
};
function getMobileWidth(){
    return getOrientation() == "landscape" ? screen.availHeight : screen.availWidth;
};
function getMobileHeight(){
    return getOrientation() == "landscape" ? screen.availWidth : screen.availHeight;
};

Javascript 및 오브젝트를 사용 하여 모니터 화면 해상도 가져 오기를 참조 하십시오.window.screen

function getScreenWidth()
{
   var de = document.body.parentNode;
   var db = document.body;
   if(window.opera)return db.clientWidth;
   if (document.compatMode=='CSS1Compat') return de.clientWidth;
   else return db.clientWidth;
}

나중에 참조하기 위해 :

function getscreenresolution()
{
    window.alert("Your screen resolution is: " + screen.height + 'x' + screen.width);
}

화면 해상도를 감지하려면 플러그인 해상도 를 확인하십시오 . 다음을 수행 할 수 있습니다.

var res = require('res')
res.dppx() // 1
res.dpi() // 96
res.dpcm() // 37.79527559055118

다음은 플러그인 작성자 인 Ryan Van Etten의 훌륭한 해결책 입니다.

• 장치 단위와 CSS 단위의 두 가지 단위 집합이 존재하며 고정 된 크기로 다릅니다.
• 해상도는 특정 CSS 길이에 맞는 도트 수로 계산됩니다.
• 단위 변환 : 1 인치 = 2.54cm = 96px = 72pt
• CSS는 상대 길이와 절대 길이를 가지고 있습니다. 일반 줌에서 : 1em = 16px
• dppx는 장치 픽셀 비율과 같습니다.
• devicePixelRatio 정의는 플랫폼마다 다릅니다.
• 미디어 쿼리는 최소 해상도를 타겟팅 할 수 있습니다. 속도를주의해서 사용하십시오.

오늘 현재 res의 소스 코드는 다음과 같습니다.

!function(root, name, make) {
  if (typeof module != 'undefined' && module.exports) module.exports = make()
  else root[name] = make()
}(this, 'res', function() {

  var one = {dpi: 96, dpcm: 96 / 2.54}

  function ie() {
    return Math.sqrt(screen.deviceXDPI * screen.deviceYDPI) / one.dpi
  }

  function dppx() {
    // devicePixelRatio: Webkit (Chrome/Android/Safari), Opera (Presto 2.8+), FF 18+
    return typeof window == 'undefined' ? 0 : +window.devicePixelRatio || ie() || 0
  }

  function dpcm() {
    return dppx() * one.dpcm
  }

  function dpi() {
    return dppx() * one.dpi
  }

  return {'dppx': dppx, 'dpi': dpi, 'dpcm': dpcm}
});