媒体查询不使用 max-width 但使用 max-device-width

Question

我正在尝试使我的网站适应平板电脑，所以当我包含这样的外部 CSS 文件时

<link rel="stylesheet" media="screen and (max-device-width: 960px) and (max-device-height: 1280px)" href="/css/tablets.css" />

媒体查询有效，但当我使用 max-width 和 max-height 时，它们不起作用。有趣的是，当我尝试将媒体查询用于横向模式时，情况正好相反：

<link rel="stylesheet" media="screen and (max-device-width: 1280px) and (max-device-height: 960px)" href="/css/tablets.css" />

在 max-width 和 max-height 工作时不起作用。那是怎么回事？

为了测试，我使用 iPad Mini Retina。

Answer 1

可能是因为你没有在head标签中使用viewport。

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

我确实测试了代码，它工作正常。