@media 在 phone 上不工作，但在桌面上工作

Question

我创建了我的网站并希望使其适合移动设备。
所以我创建了一个媒体查询并开始使用它。在缩放我的浏览器时进行检查 window。

如果我在 phone 上检查同一页面，它不会更改布局。

我看不到我错过了什么。
这是我拥有的：
HTML:

<div>
    <p>
        <h2>Title</h2>
    </p>
</div>

CSS:

@media (max-width: 768px) {
  h2{
    font-size:2.5vw !important;
  }
}

h2{
    font-size:1.5vw;
}

希望我只是错过了一件小事:-)

男.

Answer 1

试试这个

@media only screen and (max-width:768px) { ... }

或

@media only screen and (min-width:320px) { ... }

Answer 2

听起来你需要告诉设备使用它的实际像素宽度：

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

某些设备会在假定未针对移动设备进行优化的情况下呈现页面。将该元标记放入您的 <head> 标记中，让我们知道是否可以解决问题。更多信息 here.

Answer 3

尝试将此添加到您的代码中：

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

@media not working on phone but does on desktop