장치 속임수에 직면하여 JS/CSS에서 DPI/PPI를 정확하게 감지하는 방법은 무엇입니까?

JS/CSS에서 시스템 DPI/PPI 감지

배경

DPI/PPI 설정이 다양한 여러 기기에서 일관된 사용자 경험을 유지하는 것이 중요합니다. 고해상도 이미지를 생성하는 최신 애플리케이션용. 그러나 기존 방법은 신뢰할 수 있는 결과를 제공하지 못하기 때문에 장치의 DPI/PPI를 정확하게 감지하는 것은 어려운 일입니다.

장치 거짓말: 거짓 96ppi 읽기

고정된 " CSS의 너비가 1인치이고 offsetWidth를 확인하는 것이 합리적으로 보입니다. 그러나 iPhone은 PPI를 잘못 보고하여 96ppi라는 잘못된 값을 제공하는 것으로 알려져 있습니다. 잘못된 판독으로 인해 이 방법을 신뢰할 수 없게 됩니다.

대체 접근 방식: 장치 디스플레이 크기

또 다른 잠재적인 해결책은 장치 디스플레이 크기를 인치 단위로 검색하여 너비(픽셀 단위)로 나누는 것입니다. 그러나 JS/CSS에서는 이러한 차원에 액세스하는 것이 간단하지 않습니다.

해결책: DevicePixelRatio

다행히도 장치 DPI/PPI를 얻는 신뢰할 수 있는 방법이 있습니다:

1. window.devicePixelRatio 사용: 이 속성은 장치 화면의 픽셀과 CSS 픽셀의 비율을 제공합니다.
2. 테스트 요소 만들기: 다음을 사용하여 보이지 않는 요소를 만듭니다. CSS에서 1인치의 높이와 너비.
3. 디스플레이 해상도 검색: 요소의 오프셋 너비와 높이에 devicePixelRatio를 곱하여 DPI/PPI를 계산합니다.

<code class="javascript">const testDiv = document.createElement('div');
testDiv.style.height = '1in';
testDiv.style.left = '-100%';
testDiv.style.position = 'absolute';
testDiv.style.top = '-100%';
testDiv.style.width = '1in';
document.body.appendChild(testDiv);

const DPI_X = testDiv.offsetWidth * window.devicePixelRatio;
const DPI_Y = testDiv.offsetHeight * window.devicePixelRatio;

console.log(DPI_X, DPI_Y);</code>

이 방법은 기존 방법을 사용하여 PPI를 잘못 보고할 수 있는 장치를 포함하여 다양한 장치에서 정확한 DPI/PPI 판독값을 제공합니다.

위 내용은 장치 속임수에 직면하여 JS/CSS에서 DPI/PPI를 정확하게 감지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!