@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">

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