픽셀 비율 : 모든 너비 속성에 적용된 고해상도 기기의 "가짜"픽셀 값입니까, 아니면 선택한 속성에만 적용됩니까?

Question

Android 및 iOS 용 모바일 앱의 웹보기에 완전히 살고있는 웹 상점 용 CSS를 만들고 있습니다. 휴대 전화와 태블릿을 구별하기 위해 미디어 쿼리를 사용하고 있습니다.

내 규칙을 단순하게 유지하는 방법을 알아 냈습니다. 768 픽셀 미만의 장치 너비를 가진 모든 것에 적용되는 "전화"레이아웃이 있습니다. 다른 모든 것은 태블릿 레이아웃입니다. 이것은 내 목적을 위해 잘 작동합니다.

콘텐츠는 모든 휴대 전화에서 세로 모드로 강제 실행되는 앱 내에 표시됩니다. 따라서 사용자가 700 x 900 픽셀의 휴대 전화를 기울이면 기기 폭은 여전히 ​​700 픽셀입니다. 그래서 이것은 모두 좋다.

나는 잠시 동안 모든 새로운 모바일 장치가 나오면서 추락 할 것으로 예상했다. 초 고해상도를 가지고 있기 때문이다. 그 말은 내가 그 전화기에서 타블렛 레이아웃을 얻는 것을 의미 할 것이다.

다행히도 OS와 장치 제조업체는이 문제보다 앞서고 있으며 픽셀 값은 실제 픽셀 수보다 훨씬 적습니다. 새로운 장치에는 1.5 또는 2.0 또는 3.0과 같은 값을 가진 device-pixel-ratio이라는 속성이 있습니다. ony는보고 된 픽셀에 해당 비율을 곱하면 실제 픽셀 수를 얻습니다.

좋아요.

이제이 설정 (픽셀 크기 가짜)이 모든 픽셀 기반 CSS 값에 적용됩니까?

• width
• device-width
• min-width
• min-device-width
• max-width
• max-device-width (높이에서 동일)
대부분 구체적으로는, 이하의 모든 속성에 적용 되는가

다른 사람이 "가짜"것을 얻는 동안이 아기 중 일부는 "실제"픽셀 수를 얻습니까?

는

편집 :

크리스 2의 장치 픽셀 비율 가상 700x900px 장치가 width 및 device-width는 "700 픽셀"를 "350px"을보고하는 것이 그의 대답에 설명합니다. 그래서

@media only screen and (max-device-width: 767px) { /* Phone-sized styling */} 

@media only screen and (min-device-width: 768px) { /* Tablet-sized styling */} 

(예 ...이 올바른 미디어 쿼리 것, 태블릿과 같은 미디어 다른 전화 크기의 장치와이 장치를 그룹화 쿼리 및 아이 패드 폭의 무엇이든 또는 위쪽을하기를 원한다면 , orientation 속성도 iOS 기기에서 작동하지만 여기서 잠시 무시하자.)

Answer 1

CSS의 기기 높이 및 너비는 CSS 픽셀이 아니라 화면의 물리적 픽셀을 의미합니다. device-pixel-ratio.

예를 들어 휴대 전화의 해상도가 700x900이고 device-pixel-ratio이 2이면 실제 픽셀 너비는 700px이지만 CSS 픽셀 너비는 350px입니다.즉, width: 350px; 및 device-width: 700px;은이 화면에서 정확히 같은 크기입니다.

희망 하시겠습니까?