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

Question

我在这个网站上有以下代码（它是 Github Pages，所以你可以在这里看到存储库）：

@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 用户代理字符串的事情？或许？

这是怎么回事以及如何解决？

Answer 1

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

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

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

有关这方面的更多信息可以在此处找到。