Question

我有一个简单的网站，我在（安全隧道）http://79a6b00f.ngrok.io使用媒体查询和所有内容制作我的音乐，并在index.html的标题中使用元标记（<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），可能它与元标记实现有某种冲突

Answer 2

您必须向＃1 显示 meta 视口标记。很多。

但也;如果您希望在浏览器中看到更改，您可以随时将媒体查询编写为2个宽度，如下所示：

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

媒体查询甚至无法使用<meta />标记

2 个答案: