为什么我的 CSS 媒体查询无法在所有移动设备上运行？

Question

我正在尝试使用 CSS 媒体查询来更改我的网站在移动设备和较小屏幕尺寸上的外观，但只有某些设备（某些手机可以使用，其他手机不能）实际使用我定义的媒体查询样式。

在我的 HTML 头部有以下元标记

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

在我的外部样式表中，我在最后有以下媒体查询代码块，它更改了先前定义的类的样式：

@media all and (max-width: 920px) {
...
}

我检查的设备包括我的 iPhone 14 Pro（在 Chrome 和 Safari 中正确使用媒体查询）、iPhone 13（在 Chrome 或 Safari 中没有使用媒体查询）、Google Pixel 7（在 Chrome 中没有使用媒体查询） .

我尝试更改 HTML 元标记以包含额外的比例信息，还尝试在 CSS 中使用 max-device-width 而不是 max-width，但无济于事。

如果我的媒体查询实现有任何问题，请告诉我。

Answer 1

尝试将其添加到 head 标签中：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="HandheldFriendly" content="true">

很可能某些设备正在尝试为您缩放内容。本质上，您想要“关闭此功能”，以便您可以通过媒体查询控制该过程。