반응 형 디자인 : iPad 4 세대는 2048px x 1536px이지만 미디어 쿼리는 768px 이하에서 활성화됩니다 ... 왜?

Question

iPad 4 세대에서 웹 사이트를 테스트 중이며 픽셀 크기는 2048px x 1536px이지만 768px 이하의 "모바일"미디어 쿼리 (세로보기)를 활성화하고 내 "태블릿"미디어를 활성화합니다 쿼리 (가로보기)는 769px 및 1024px입니다.

이유가 궁금합니다.

내가 머리에이 메타 태그를 사용하고, 그리고 내가이 일을 왜이 확신,

<meta name="viewport" content="width=device-width, initial-scale=1"/> 

<link href="mobile.css" type="text/css" rel="stylesheet" media="screen and (min-width: 0) and (max-width: 768px)" /> 
<link href="tablet.css" type="text/css" rel="stylesheet" media="screen and (min-width: 769px) and (max-width: 1024px)" /> 

내가 불평 아니에요, 나는이 그것을해야 적절한 방법이라고 생각 작업. 나는 왜 그것이 작동하는지 혼란스러워합니까? 1536px에서 768px로 변하는 마법은 무엇입니까?

Answer 1

Retina iPad와 iPhone은 실제로하는 픽셀 수가 가장 적습니다. 그렇지 않으면 대부분의 웹 사이트가 눈에 띄지 않을 정도로 작기 때문입니다.

CSS 픽셀에서 디스플레이 픽셀까지 1 : 1 매핑이 반드시 필요한 것은 아닙니다. 자세한 내용은 A pixel is not a pixel is not a pixel을 참조하고 더 자세한 공식 소스는 W3C 문서 EM, PX, PT, CM, IN...을 참조하십시오.