장치 픽셀 비율은 정확히 무엇입니까?

장치 픽셀 비율은 정확히 무엇입니까?

이것은 모바일 웹에 대한 모든 기사에서 언급되지만, 이 속성이 정확히 무엇을 측정하는지에 대한 설명을 어디에서도 찾을 수 없습니다.
누가 이 수표와 같은 질문이 무엇인지 자세히 설명해 주시겠습니까?

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-device-pixel-ratio: 3/2), 
only screen and (min-device-pixel-ratio: 1.5) {

    //high resolution images go here

}

단답형

장치 픽셀 비율은 물리적 픽셀과 논리적 픽셀 간의 비율입니다.예를 들어, iPhone 4와 iPhone 4S는 물리적 선형 해상도가 논리적 선형 해상도의 두 배이기 때문에 장치 픽셀 비율이 2라고 보고합니다.

• 물리적 해상도: 960 x 640
• 논리적 해상도: 480 x 320

공식은 다음과 같습니다.

에▁where디물리적 선형 분해능입니다.는 논리적 선형 해상도입니다.

다른 장치는 정수가 아닌 장치를 포함하여 서로 다른 장치 픽셀 비율을 보고합니다.예를 들어 Nokia Lumia 1020은 1.6667, Samsumg Galaxy S4는 3, Apple iPhone 6 Plus는 2.46(소스: dpilove)을 보고합니다.그러나 이는 원칙적으로 어떤 특정 장치에 대해서도 설계해서는 안 되기 때문에 아무것도 바꾸지 않습니다.

논의

CSS "픽셀"은 "어떤 화면에 하나의 그림 요소"로 정의되지도 않고, 대신 기준 픽셀이 있는데, 이는 다음의 비선형 각도 측정입니다.시야이 이것은 것은대 로으적입니다.1인치의출처: CSS 절대 길이

이는 고화질 이미지 리소스를 준비하고 서로 다른 장치 픽셀 비율로 서로 다른 이미지를 신중하게 적용하는 등 웹 디자인에 많은 영향을 미칩니다.로우엔드 장치에서 매우 높은 해상도의 이미지를 강제로 다운로드하지 않고 로컬로 축소하려고 할 수 있습니다.또한 고급 장치가 흐릿한 사용자 환경을 위해 저해상도 이미지의 크기를 늘리지 않도록 해야 합니다.

비트맵 이미지가 남아 있는 경우 다양한 장치 픽셀 비율을 수용하려면 CSS 미디어 쿼리 또는 HTML 그림 요소를 사용하여 여러 장치 그룹에 서로 다른 리소스 세트를 제공해야 합니다.이 값을 와 같은 좋은 트릭과 결합하거나 to 백분율 값을 명시적으로 설정합니다.

예

#element { background-image: url('lores.png'); }

@media only screen and (min-device-pixel-ratio: 2) {
    #element { background-image: url('hires.png'); }
}

@media only screen and (min-device-pixel-ratio: 3) {
    #element { background-image: url('superhires.png'); }
}

이렇게 하면 각 장치 유형은 올바른 이미지 리소스만 로드합니다.또한 기억하십시오.pxCSS의 단위는 항상 논리 픽셀에서 작동합니다.

벡터 그래픽의 경우

점점 더 많은 장치 유형이 나타날수록 모든 장치 유형에 적절한 비트맵 리소스를 제공하는 것이 더 까다로워집니다.CSS에서는 미디어 쿼리가 현재 유일한 방법이며 HTML5에서는 그림 요소를 사용하여 다양한 미디어 쿼리에 다른 소스를 사용할 수 있지만 대부분의 웹 개발자는 여전히 IE11을 더 지원해야 하기 때문에 지원이 100%는 아닙니다(소스: caniuse).

사진이 아닌 아이콘, 라인 아트, 디자인 요소를 위한 선명한 이미지가 필요하다면 모든 해상도에 맞게 아름답게 확장되는 SVG에 대해 생각해 볼 필요가 있습니다.

장치 픽셀 비율 == CSS 픽셀 비율

웹 개발 세계에서 장치 픽셀 비율(CSS 픽셀 비율이라고도 함)은 장치의 화면 해상도가 CSS에 의해 어떻게 해석되는지를 결정합니다.

브라우저의 CSS는 다음 공식으로 장치의 논리적(또는 해석된) 해상도를 계산합니다.

예:

애플 아이폰 6s

• 실제 해상도: 750 x 1334
• CSS 픽셀 비율: 2
• 논리적 해상도:

웹 페이지를 볼 때 CSS는 장치에 375x667 해상도 화면이 있다고 생각하고 미디어 쿼리는 화면이 375x667인 것처럼 응답합니다.그러나 실제 화면에는 두 배의 물리적 픽셀이 있기 때문에 화면에 렌더링된 요소는 실제 375x667 화면보다 두 배 더 선명합니다.

다른 몇 가지 예:

갤럭시 S4

• 실제 해상도: 1080 x 1920
• CSS 픽셀 비율: 3
• 논리적 해상도:

아이폰 5s

• 실제 해상도: 640 x 1136
• CSS 픽셀 비율: 2
• 논리적 해상도:

장치 픽셀 비율이 존재하는 이유는 무엇입니까?

CSS 픽셀 비율이 만들어진 이유는 전화 화면이 더 높은 해상도를 가질 때 모든 장치가 여전히 CSS 픽셀 비율이 1이면 웹 페이지가 너무 작게 렌더링되어 볼 수 없기 때문입니다.

일반적인 전체 화면 데스크톱 모니터는 1920x1080 해상도의 약 24인치입니다.이 모니터가 약 5인치로 축소되었지만 해상도는 같다고 가정해 보십시오.화면에서 사물을 보는 것은 너무 작아서 불가능할 것입니다.하지만 제조업체들은 1920x1080 해상도의 전화 스크린을 계속해서 출시하고 있습니다.

그래서 장치 픽셀 비율은 전화기 제조사들에 의해 발명되었습니다. 그래서 그들은 화면의 요소들을 너무 작게 만들거나 읽거나 하지 않고 전화기 화면의 해상도, 선명도, 품질을 계속해서 누를 수 있었습니다.

다음은 현재 장치의 픽셀 밀도도 알려주는 도구입니다.

http://bjango.com/articles/min-device-pixel-ratio/

Boris Smus의 기사 가변 픽셀 밀도에 대한 높은 DPI 이미지는 장치 픽셀 비율에 대한 더 정확한 정의를 가지고 있습니다. CSS 픽셀당 장치 픽셀 수는 좋은 근사치이지만 전체 이야기는 아닙니다.

다음과 같은 장치에서 사용되는 DPR을 얻을 수 있습니다.window.devicePixelRatio.

https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio

-device-device-pixel-timeout
CSS 픽셀당 장치 픽셀 수를 제공합니다.

이것은 거의 자기 설명입니다.숫자는 하나의 "가상" 픽셀(CSS로 설정된 크기)을 표시하는 데 사용되는 "실제" 픽셀(화면의 물리적 픽셀)의 비율을 나타냅니다.

장치 픽셀 비율은 장치의 픽셀 밀도와 직접적인 상관 관계가 있습니다.

내가 찾을 수 있는 가장 간결한 설명:

DPR의 목적은 서로 다른 물리적 픽셀 밀도를 가진 다양한 장치에서 CSS 픽셀의 일관된 크기를 유지하고 따라서 문자, 기호, 이미지 및 화면의 다른 모든 것의 일관된 크기를 유지하는 것입니다.

출처: 화면 해상도 테스트

언급URL : https://stackoverflow.com/questions/8785643/what-exactly-is-device-pixel-ratio