html - 即使使用 <meta> 标记，媒体查询也无法正常工作

Question

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

我让人在手机上进行了测试，结果网站缩小了，而不是保持比例并显示汉堡菜单。这是我的查询代码:

@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 )，可能与元标记实现存在某种冲突