장치 픽셀 비율/해상도의 미디어 쿼리 : 구문이 잘못 되었습니까?

Question

iOS 시뮬레이터를 사용하여 다양한 iOS 장비에 대한 반응 형 테마의 미디어 쿼리를 테스트하고 있지만 아래의 미디어 쿼리는 렌더링되지 않습니다. 저는 w3.org 미디어 쿼리 표준과 this blog post, A 목록 외의 A Pixel Identity Crisis 및 다른 몇 가지 사이의 Mozilla's blog post을 참조했지만 쿼리가 깨지는 것을보고 있지 않습니까?

/*-- iPhone 4, 4S Retina -----------------------*/ 

@media 
screen and (min-pixel-ratio:2) and (min-width:320px) and (max-width:600px), 
screen and (-webkit-min-pixel-ratio:2) and (min-width:320px) and (max-width:600px), 
screen and (-o-min-pixel-ratio:2/1) and (min-width:320px) and (max-width:600px), 
screen and (min--moz-pixel-ratio:2) and (min-width:320px) and (max-width:600px),/* Firefox browsers prior to FF 16) */ 
screen and (min-resolution:2ddpx) and (min-width:320px) and (max-width:600px) { 
    /*styles here */ 
} 


/*------- iPhone 2G, 3G, 3GS -------------*/ 
@media 
screen and (max-device-pixel-ratio: 1.5) and (min-width: 320px) and (max-width: 600px), 
screen and (-webkit-max-device-pixel-ratio: 1.5) and (min-width: 320px) and (max-width: 600px), 
screen and (-o-max-device-pixel-ratio: 1/5) and (min-width: 320px) and (max-width: 600px), 
screen and (max--moz-device-pixel-ratio: 1.5) and (min-width: 320px) and (max-width: 600px), /* Firefox browsers prior to FF 16) */ 
screen and (max-resolution: 1.5ddpx) and (min-width: 320px) and (max-width: 600px) { 
    /*styles here*/ 
} 

Answer 1

당신은 단지 당신은 안전하게 같은 당신의 미디어 쿼리를 단축 할 수 있습니다 (당신이 오페라/파이어 폭스에 대해 걱정할 필요가 없습니다) IOS를 대상으로하는 경우 :

/*-- iPhone 4, 4S Retina -----------------------*/ 
@media screen and (-webkit-min-pixel-ratio:2) and (min-width:320px) and (max-width:600px) { 
    /*styles here */ 
} 

/*------- iPhone 2G, 3G, 3GS -------------*/ 
@media screen and (min-width: 320px) and (max-width: 600px){ 
    /*styles here*/ 
} 

것은 또한 할 수있는 당신의 사이트가 그것들을 필요로한다면 (orientation: landscape)/(orientation: portrait) 사람도 거기에있는 것이 좋습니다.