我的NextJS网站上有多个（普通的）CSS媒体查询。媒体查询在我的桌面浏览器上运行良好，但当我在手机上打开网站时，媒体查询不起作用。我检查了caniuse.com，我使用的所有CSS属性都应该在iOS版Safari上运行。作为参考，我的iPhone上安装了最新版本的Safari，我在很多网站上看到NextJS不会像React那样自动添加以下 meta标记，必须手动添加：
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1"></meta>我把它放在_app.tsx的<Head></Head>标签里，但是我的手机浏览器仍然没有响应媒体的查询。
下面是一个媒体查询示例：
@media (max-width: 1200px) or (max-height: 700px) {
body {
background-color: var(--lightBlue);
}
}
2条答案
按热度按时间4ktjp1zp1#
我在多个查询上使用了
or，iOS上的Safari不支持/响应。用and切换或创建多个查询可以工作。bbmckpt72#
详细解释我的评论。
不需要两个单独的查询。您还可以使用逗号分隔一个查询中的两个（或多个）不同规则。
从MDN开始
当用户的设备与各种媒体类型、功能或状态中的任何一种相匹配时，您可以使用逗号分隔的列表来应用样式。