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

Question

我在 this site (it's Github Pages so you can see the 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 window 大一像素：

突然好用了！

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

这是怎么回事，我该如何解决？

Answer 1

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

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

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

有关这方面的更多信息，请参见 here。

Answer 2

添加

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

在网站的 <head> 标签中最好为 media-query

设置标准 max-width:768px 而不是 600px

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

CSS "@media only screen" only triggers when I resize window?

css

firefox