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

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

---

이것은 모바일 웹에 관한 모든 기사에서 언급되었지만,이 속성이 정확히 무엇을 측정하는지에 대한 설명을 찾을 수 없습니다.

 

누구 든지이 검사와 같은 쿼리가 무엇인지 자세히 설명해 주시겠습니까?

@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

공식은 다음과 같습니다.

어디:

는 IS

물리적 선형 해상도는

과:

논리적

선형 분해능

다른 장치는 정수가 아닌 것을 포함하여 다른 장치 픽셀 비율을보고합니다. 예를 들어 Nokia Lumia 1020은 1.6667, Samsumg Galaxy S4는 3, Apple iPhone 6 Plus는 2.46

(출처 : dpilove )을보고

합니다. 그러나 특정 장치를 위해 설계해서는 안되므로 원칙적으로 아무것도 변경되지 않습니다.

토론

CSS "픽셀"은 "일부 화면에서 하나의 그림 요소"로 정의되는 것이 아니라 팔 길이에서 약 1 인치 인 시야각의

비선형 각도 측정

으로 정의

됩니다

.

출처 : CSS 절대 길이

이는 고화질 이미지 리소스를 준비하고 다른 이미지를 다른 장치 픽셀 비율로 신중하게 적용하는 것과 같이 웹 디자인에 많은 영향을 미칩니다. 로우 엔드 장치가 고해상도 이미지를 강제로 다운로드하지 않고 로컬로 다운 스케일링하기를 원할 것입니다. 또한 고급형 장치가 흐릿한 사용자 경험을 위해 저해상도 이미지를 업 스케일하지 않기를 바랍니다.비트 맵 이미지가 붙어있는 경우 여러 장치 픽셀 비율을 수용하려면

CSS 미디어 쿼리

를 사용 하여 장치 그룹마다 다른 리소스 집합을 제공 해야 합니다. 이것을 좋은 트릭과 결합

background-size: cover

하거나 명시 적

background-size

으로 백분율 값 으로 설정하십시오 .

예

#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'); }
}

이런 식으로 각 장치 유형은 올바른 이미지 리소스 만로드합니다. 또한

px

CSS 의 단위는

항상

 

논리 픽셀에서

작동합니다 .

벡터 그래픽의 경우

점점 더 많은 장치 유형이 나타날수록 모든 장치에 적절한 비트 맵 리소스를 제공하는 것이 더 까다로워집니다. CSS에서 미디어 쿼리는 현재 유일한 방법이며 HTML5에서는

picture 요소

를 사용하여 다른 미디어 쿼리에 대해 서로 다른 소스를 사용할 수 있지만 대부분의 웹 개발자는 여전히 IE11을 더 오랫동안 지원해야하기 때문에 여전히 100 %가 아닙니다

( 출처 : caniuse )

.

사진이 아닌

아이콘, 라인 아트 및 디자인 요소에 대한 선명한 이미지가 필요한 경우 SVG에 대해 생각해야합니다. SVG는 모든 해상도로 아름답게 확장됩니다.

---

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

웹 개발의 세계에서 장치 픽셀 비율 (CSS 픽셀 비율이라고도 함)은 CSS가 장치의 화면 해상도를 해석하는 방법을 결정합니다.브라우저의 CSS는 다음 공식으로 장치의 논리적 (또는 해석 된) 해상도를 계산합니다.

예를 들면 다음과 같습니다.

애플 아이폰 6s

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

When viewing a web page, the CSS will think the device has a 375x667 resolution screen and Media Queries will respond as if the screen is 375x667. But the rendered elements on the screen will be twice as sharp as an actual 375x667 screen because there are twice as many physical pixels in the physical screen.

Some other examples:

Samsung Galaxy S4

• Actual Resolution: 1080 x 1920
• CSS Pixel Ratio: 3
• Logical Resolution:

iPhone 5s

• Actual Resolution: 640 x 1136
• CSS Pixel Ratio: 2
• Logical Resolution:

Why does the Device Pixel Ratio exist?

The reason that CSS pixel ratio was created is because as phones screens get higher resolutions, if every device still had a CSS pixel ratio of 1 then webpages would render too small to see.

A typical full screen desktop monitor is a roughly 24" at 1920x1080 resolution. Imagine if that monitor was shrunk down to about 5" but had the same resolution. Viewing things on the screen would be impossible because they would be so small. But manufactures are coming out with 1920x1080 resolution phone screens consistently now.

So the device pixel ratio was invented by phone makers so that they could continue to push the resolution, sharpness and quality of phone screens, without making elements on the screen too small to see or read.

Here is a tool that also tells you your current device's pixel density:

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

---

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

-moz-device-pixel-ratio
Gives the number of device pixels per CSS pixel.

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

---

Boris Smus의

가변 픽셀 밀도에 대한 높은 DPI 이미지

는 장치 픽셀 비율을보다 정확하게 정의합니다. CSS 픽셀 당 장치 픽셀 수는 근사치이지만 전체 이야기는 아닙니다.로 장치에서 사용하는 DPR을 얻을 수 있습니다

window.devicePixelRatio

.참고 URL :

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