響應式設計：iPad第4代爲2048px x 1536px，但媒體查詢在768px及以下激活...爲什麼？

Question

我在iPad第四代測試網站，其像素大小爲：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

視網膜iPad和iPhone假裝像素更少，因爲否則大多數網站的尺寸都不可小視。

從CSS像素到顯示像素的映射不一定是1：1 - 關於此更多信息，請參閱A pixel is not a pixel is not a pixel，關於此更多信息，請參閱W3C文檔EM, PX, PT, CM, IN...以獲取更多官方信息。