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

Question

我在this site上有以下代码(这是 Github Pages，因此您可以看到存储库 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 用户代理字符串的事情？也许？

发生了什么事以及如何解决它？

Answer 1

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

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

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

有关这方面的更多信息，请访问 here .