JavaScript를 사용하여 장치 DPI/PPI를 어떻게 정확하게 감지할 수 있습니까?

JS/CSS에서 장치 DPI/PPI 감지

적절한 크기의 이미지를 생성하려면 장치의 디스플레이 해상도를 결정하는 것이 중요합니다. 그러나 JavaScript 또는 CSS에서 직접 시스템 DPI 또는 PPI를 감지하는 것은 어려운 일입니다.

추천되는 접근 방식 중 하나는 CSS에서 너비가 "1in"으로 설정된 요소를 만들고 해당 offsetWidth를 측정하는 것입니다. 그러나 이 방법은 DPI가 96으로 잘못 보고되는 iPhone과 같은 장치에서는 신뢰할 수 없는 것으로 판명되었습니다.

대안 전략으로는 디스플레이 크기를 인치 단위로 구하고 이를 너비(픽셀 단위)로 나누는 것입니다. 이 접근 방식을 구현하려면 다음 단계가 필요합니다.

1. 1x1인치 크기의 보이지 않는 요소를 만듭니다.
2. 레이아웃에 간섭하지 않도록 요소를 화면 밖에 배치합니다.
3. window.devicePixelRatio를 사용하거나 기본값을 사용하여 장치 픽셀 비율(DPR)을 계산합니다. 1.
4. 요소의 offsetWidth와 offsetHeight에 DPR을 곱하여 수평 및 수직 DPI를 결정합니다.

아래는 이 접근 방식을 보여주는 JavaScript 코드 조각입니다.

<div>

이 접근 방식은 장치의 DPI/PPI를 정확하게 캡처하여 장치별 데이터를 정확하게 생성할 수 있습니다. 이미지.

위 내용은 JavaScript를 사용하여 장치 DPI/PPI를 어떻게 정확하게 감지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!