1

我正在第四代 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 的魔法是什么？

4

1 回答 1

2

Retina iPad 和 iPhone 假装它们的像素更少，因为否则大多数网站会变得难以阅读。

从 CSS 像素到显示像素不一定存在 1:1 映射 - 请参阅A pixel is not a pixel is not a pixel了解更多信息，以及 W3C 文档EM、PX、PT、CM、IN...以获得更官方的来源。

于 2014-04-17T09:21:08.480 回答