JavaScript로 화면 해상도를 검출하는 방법

JavaScript로 화면 해상도를 검출하는 방법

모든 브라우저에서 사용할 수 있는 방법이 있나요?

독창적인 대답

네.

window.screen.availHeight
window.screen.availWidth

2017-11-10 업데이트

쓰나미로부터 코멘트:

모바일 디바이스의 네이티브 해상도를 얻으려면 디바이스 픽셀 비율에 곱해야 합니다. window.screen.width * window.devicePixelRatio ★★★★★★★★★★★★★★★★★」window.screen.height * window.devicePixelRatio기능은 할 수 데스크톱의 1기기 、 기 、 입 、 1 。

그리고 Ben은 또 다른 대답으로:

vanilla JavaScript에서는 사용 가능한 너비/높이를 제공합니다.

window.screen.availHeight
window.screen.availWidth

절대 폭/높이의 경우 다음을 사용합니다.

window.screen.height
window.screen.width

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

vanilla JavaScript에서는 사용 가능한 너비/높이를 제공합니다.

window.screen.availHeight
window.screen.availWidth

절대 폭/높이의 경우 다음을 사용합니다.

window.screen.height
window.screen.width

위의 두 가지 모두 창 프리픽스를 사용하지 않고 쓸 수 있습니다.

jQuery처럼?이것은 모든 브라우저에서 작동하지만 브라우저마다 값이 다릅니다.

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

또한 WINDOW 너비와 높이를 얻을 수 있어 브라우저 도구 모음 및...(화면 크기뿐만 아니라)

, 다음과 같이 사용합니다.window.innerWidth ★★★★★★★★★★★★★★★★★」window.innerHeight특성.w3schools에서 확인하세요.

예를 들어 대부분의 경우 완전히 중심에 있는 부동 모달 대화 상자를 표시하는 것이 가장 좋습니다.브라우저를 사용하는 해상도 방향이나 창 크기에 관계없이 창의 위치를 계산할 수 있습니다.

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

화면 해상도를 통해 10픽셀 선의 두께(인치)를 알 수 있습니다.픽셀 치수는 사용 가능한 화면 높이의 몇 퍼센트를 10픽셀 폭의 수평선이 차지하는지 나타냅니다.

컴퓨터 자체는 보통 화면의 실제 크기를 알 수 없기 때문에 Javascript만으로는 디스플레이 해상도를 알 수 없습니다. 72dpi는 일반적인 추측입니다.

디스플레이 해상도에 대해서는 많은 혼동이 있습니다.많은 경우 픽셀 해상도 대신 이 용어를 사용하고 있습니다만, 이 둘은 상당히 다릅니다.Wikipedia 참조

물론 cm당 도트로 분해능을 측정할 수도 있습니다.사각형이 아닌 점이라는 애매한 주제도 있다.하지만 나는 주제에서 벗어났군.

jQuery를 사용하여 다음 작업을 수행할 수 있습니다.

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

모바일 기기에서 이 기능을 사용하려면 몇 가지 단계가 더 필요합니다. 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 및 개체를 사용하여 모니터 화면 해상도 가져오기를 참조하십시오.

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 유닛의 2개의 유닛 세트가 존재하며 고정 스케일로 다릅니다.
• 분해능은 특정 CSS 길이에 따라 들어갈 수 있는 도트 수로 계산됩니다.
• 단위 변환 : 1µin = 2.54µcm = 96µpx = 72µpt
• CSS에는 상대 길이와 절대 길이가 있습니다.통상 줌시 : 1µem = 16µpx
• dppx는 device-module-module과 동일합니다.
• 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}
});

브라우저 해상도를 의미한다면

window.innerWidth는 브라우저 해상도를 제공합니다.

http://howbigismybrowser.com/에서 테스트할 수 있습니다.브라우저를 줌인/아웃하여 화면 해상도를 변경해 주세요.http://howbigismybrowser.com/ Window.innerWidth는 화면 해상도 폭과 같아야 합니다.

화면 해상도를 쉽게 찾을 수 있는 절차는 다음과 같습니다.

• 알았다.

`My screen resolution is: ${window.screen.width} * ${window.screen.height}`

• 브라우저 콘솔에 붙여넣기
• 엔터 키를 누르다

언급URL : https://stackoverflow.com/questions/2242086/how-to-detect-the-screen-resolution-with-javascript