왜이 미디어 쿼리가 망막을 쳤지 않습니까?

Question

Retina 화면을 타겟팅하려는 미디어 쿼리로 고생하고 있습니다. 이 미디어 쿼리가 있습니다.

@media(-webkit-min-device-pixel-ration:2)and (min-resolution:192dpi) {}

.

Chrome Canary Devtools는 스타일을 얻지 만 실제로 망막 디스플레이 (이 경우 iPhone 5S)에서 테스트하지 않습니다.

또한이 뷰포트를 사용하므로 모든 것을 확장하고 제거하려고 시도했지만 위의 내 문제는 아무런 문제점도하지 않았습니다.

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=0.5 maximum-scale=0.5, user-scalable=no target-densitydpi=device-dpi">

.

이 이슈가있는 이유에 대한 아이디어는 무엇입니까?

Answer 1

이 미디어 쿼리를 사용해보십시오.

@media  
only screen and (-webkit-min-device-pixel-ratio: 2),  
only screen and ( min--moz-device-pixel-ratio: 2),  
only screen and ( -o-min-device-pixel-ratio: 2/1),  
only screen and ( min-device-pixel-ratio: 2),  
only screen and ( min-resolution: 192dpi),  
only screen and ( min-resolution: 2dppx){
   //your css goes here..
}  

.

또한 뷰포트를 변경합니다

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

.