미디어쿼리를 위하여 해상도를 검색하면 (기존에 나온거 말고 신모델의 경우 - 왜냐하면 기존것은 이미 계산되었기때문)

device-pixel-ratio를 알아야 정확한 미디어 쿼리 분기값을 알 수 있다.

신모델이 출시후 스펙이 궁금하여 해상도를 검색하면

풀HD니 QHD니 말하면서  해상도는 아래와 같이

1440 2560 (QHD)

1080 1920 (풀HD)이런거 나오고 

뒤에 ppi가 나온다.

이거면 된거다! 

만약  세로모드기준일때 스펙상 가로가 1440이고 ppi 515 라면

device-pixel-ratio는 515 나누기 160이다. 160은 approximately한 값이지만(대략적인) 

(궁금하면 원문 보시길 http://www.html5rocks.com/en/mobile/high-dpi/)

그래도 나눠서 3.3(?)~3.2정도로 떨어지면 그것은 3이다. 과거의 기록들이 그것을 나타내주고있다.

(의심되면 여러 디바이스의 device-pixel-ratio와  device-width와 devce-height를 검색해봐라)

그러면 device-width는 어떻게 구하나?

1440 / 3 이다.

(이 예는 G3의 스펙과 비슷한예이다. )

(다른 방법으로 기계가 있다면 스크립트로 재는 방법도 있다.)

따라서 이 device-pixel-ratio 값에 따라서 이미지도 값이 2이면 두배로 짜르고 3이면 세배로 짜르고 css로 백그라운드 사이즈나 width height값 조절이 device-pixel-ratio값에따라 필요한것이다. 

과거에 아이폰을 위하여 320이아닌 640에서 이미지를 짜른이유가 아이폰4의 device-pixel-ratio값이 2이기 때문이다. 

이때 잊지말아야할것은 사이즈를 2배로 줄여서 css로 처리해야한다. 간격도 마찬가지다 640에서 30px이면 320에서 15px이다. 따라서 css에서 15px로 넣어야하며, 정확히는 em단위로 해야 320이 아닌 다양한기기에서 변동적용할 수 있게된다. 

(!em 모르는 사람은 코딩전에 반드시 em의 특징은 공부하세요!)

지금현재는 640보다 고밀도 디바이스들이 나오므로 1080이상에서 이미지를 자르기를 권한다.