我在第4代iPad上测试网站，其像素大小为：2048像素x 1536像素，但它会激活我的“移动”媒体查询（纵向视图），即768像素及以下，它会激活我的“平板电脑”媒体查询（在横向视图中），即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的魔力是什么？
答案 0 :(得分：2)
Retina iPad和iPhone假装的像素实际上更少，因为否则大多数网站都会变得不那么小。
从CSS像素到显示像素不一定是1：1映射 - 有关详细信息，请参阅A pixel is not a pixel is not a pixel，有关更官方来源，请参阅W3C文档EM, PX, PT, CM, IN...。