@media 查询不适用于我的 iPad

Question

我有以下媒体查询设置：

@media only screen and (max-width: 959px)

当我缩小浏览器尺寸时它可以工作，但当我的 iPad 是纵向时它不起作用。如果我添加 and (max-device-width: 959px) 它适用于我的 iPad，但不适用于我的浏览器。我需要它在两者中都能工作。

我的 web 出了什么问题？谢谢

Answer 1

您的问题可能是某些设备提供的虚拟视口。视口大于物理屏幕，内容被浏览器缩小。如果您想在设备像素中工作，您需要添加元标记

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

这会告诉浏览器将视口设置为与没有像素缩放的设备相同的大小。