CSS“@media only screen”仅在我调整窗口大小时触发？答案

【问题标题】：CSS "@media only screen" only triggers when I resize window?CSS“@media only screen”仅在我调整窗口大小时触发？
【发布时间】：2021-11-23 01:50:08
【问题描述】：

我在this site 上有以下代码（它是 Github 页面，所以你可以看到 repo here）：

@media only screen and (max-width: 600px) {
 img {width: 100%; 
  height: 100%; 
  margin: 0; 
  padding: 0;
 } 
 a.box {
  width: 100%;
  padding:14px 15px;
  font-size: 0.75em;
 }
}

在我的手机（iPhone 7 Plus）上，屏幕宽度似乎没有触发：

iPhone 7/8/9 Plus 的 Firefox 响应式设计模式也没有：

但如果我将 firefox 窗口放大一倍：

它突然起作用了！

另外 - 如果我将响应式浏览器窗口设置为与 iphone 6/7/8 完全相同的大小 - 那么它工作正常。这表明它不是大小 - 它是关于 iphone 用户代理字符串的东西？也许吧？

发生了什么，我该如何解决？

【问题讨论】：

我认为here 下面的答案很有趣。

标签： css firefox

【解决方案1】：

您需要在头部添加一个元标记，以便浏览器正确处理视口缩放：

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

没有元标记，页面会以更高的屏幕宽度呈现，然后缩小以适应设备宽度。因此永远不会触发媒体查询。

可以在here找到更多信息。

【讨论】：

【解决方案2】：

添加

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

在<head> 网站标签中最好为media-query设置标准max-width:768px而不是600px

【讨论】：