响应性设计：第四代iPad是2048px 1536px，但媒体查询在768px及以下激活…为什么？

我在第四代iPad上测试一个网站，它的像素大小是：2048px 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的魔力？

视网膜iPad和iPhone假装拥有更少的像素，因为否则大多数网站都会小得难以想象

---

CSS像素与显示像素之间不一定存在1:1的映射关系-有关这方面的更多信息，请参阅W3C文档以获取更正式的来源。

你知道它“假装”的分辨率吗？@Ashburaczenko:我相信它使用了2:1的比例。我相信它在纵向模式下假装有0-768px，在横向模式下769px-1024px（这就是我的媒体查询设置的），所以768+768=1536px，1024+1024=2048px。。。2:1比率