即使使用 <meta> 标签，媒体查询也不起作用

Question

我有一个简单的网站，我正在（安全隧道）http://79a6b00f.ngrok.io 使用媒体查询和所有内容为我的音乐制作，在 [=28] 中使用元标记 (<meta name="viewport" content="width=device-width, initial-scale=1">) =] 在 index.html.

我已经让某人在他们的 phone 上对其进行了测试，网站会缩小，而不是保持比例并显示汉堡菜单。这是我的查询代码：

@media all and (max-width: 2600px) {
    .w-ctrl {
        width: 950px;
        margin: auto;
    }
}

@media all and (max-width: 966px) {
    .w-ctrl {
        width: 100%;
        margin: auto;
    }
    .sub-header {
        width: 100%;
        background: #37474F;
        height: 500px
    }
    .lnd-con .pic {
        height: 500px;
        background-attachment: scroll;
    }
    .lnd-con .label-con {
        top: -350px;
        text-align: center;
    }
    .label-con .title {
        font-size: 25px;
    }
    .label-con .subtitle {
        font-size: 25px;
    }
}

@media all and (max-width: 636px) {
    .w-ctrl {
        width: 100%;
        margin: auto;
    }
    .nav-con-big {
        display: none;
    }
    .nav-con-small {
        display: block;
    }
    .lnd-con .pic {
        height: 300px;
    }
    .title-con {
        display: none;
    }
    .lnd-con {
        margin-top: 0px;
    }
    .lnd-con .label-con {
        position: static;
        text-align: left;
        background: transparent;
        padding-top: 5px;
        padding-bottom: 8px;
        letter-spacing: 0px;
    }
    .label-con .title {
        font-size: 20px;
    }
    .label-con .subtitle {
        font-size: 18px;
    }
    .sub-header {
        width: 100%;
        height: 400px
    }
}

我无法将我的网站放入 js-fiddle，所以我创建了一个隧道。我希望一切都好，据我所知我没有违反任何规则。

Answer 1

我在你的 global.css:

的顶部看到这个声明

@viewport {
  zoom: 1.0;
  width: extend-to-zoom;
}

取出来或设置width: device-width;:

@viewport {
  width: device-width;
}

此外，对 css 设备适配的支持很差 (http://caniuse.com/#search=%40viewport)，可能它与元标记实现存在某种冲突

Answer 2

您必须向我们展示什么 meta viewport tag 您用于 #1。有很多.

但是也；如果你想在你的浏览器中看到变化，你总是可以在 2 个宽度之间编写媒体查询，如下所示：

/* SAMPLE No greater than 900px, no less than 400px */
@media (max-width:900px) and (min-width:400px) {
    .CurrentlyOnVacation {
        display:none;
    }
}

即使使用 <meta> 标签，媒体查询也不起作用

Media Queries not working even with <meta> tag

html

css

media-queries