CSS 媒体查询未在移动设备上显示答案

【问题标题】：CSS Media Query not displaying on mobileCSS 媒体查询未在移动设备上显示
【发布时间】：2016-10-24 17:44:37
【问题描述】：

我是新手，所以我希望这是我忽略的简单事情。

当直接在浏览器中调整窗口大小时，我构建的网站会响应媒体查询。当我在 iPad 上查看时，该网站会响应媒体查询。但是在我的手机上查看时，它显示的是平板电脑版本而不是手机版本。

@media screen and (max-width: 767px) {
.container {
    width: 100%;
}
.logo {
    background-position: 50% 30px;
}
.banner {
    height: 500px;
}
.banner h1 {
    margin-top: 0px;    
}
.title {
    background-color: #d44137;
    width: 100%;
    margin: 0;
}
.pricing h2 {
    display: none;
}
.pricing {
    width: 100%;
}
.pricing p {
    width: 95%;
}
.pricing-1 {
    margin-left: 0;
}
.pricing-1 p {
    margin-left: 0;
}   
.content {
    width: 100%;
}
.sidebar {
    width: 100%;
}
.testimonials {
    width: 90%;
    float: left;
    margin: 0;
    padding: 10px 5% 10px 5%;
}
.records {
    width: 90%;
    float: left;
    padding: 10px 0 10px 5%;
}
.info {
    width: 90%;
    float: left;
    text-align: justify;
    padding: 10px 0 10px 5%;
}
.info img {
    display: none;
}
.company {
    width: 90%;
    float: left;
    padding: 10px 5% 20px 5%;
}
.video {
    width: 90%;
    float: left;
    margin-left: 5%;
    padding-bottom: 20px;
}
form {
    width: 90%;
    margin: 0 5% 30px 5%;
}
.map {
    width: 90%;
    margin: 0 5% 30px 5%;
}
.contact h1 {
    margin-left: 5%;
}
.footer {
    height: 70px;
}
.copyright {
    font-size: 9pt;
    text-align: center;
}
.social {
    display: none;
}
}

我注意到，如果我将 max-device-width 而不是 max-width 放在媒体查询中，它适用于移动设备，但是当我调整浏览器屏幕大小时它不起作用。我还看到 device-width 现在已弃用，所以我真的不想使用它。

有什么想法吗？

非常感谢您的帮助！ :)

编辑：我错过了最后一个右括号，但这并没有影响它在移动设备上的外观。谢谢你把它捡起来！

【问题讨论】：

标签： css media-queries

【解决方案1】：

确保您已将此添加到您的 html 中。

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

【讨论】：

当我开始使用媒体查询时，我也遇到过几次同样的问题。很高兴我能帮上忙！

【解决方案2】：

你忘记关闭花括号// @media screen and (max-width: 767px) {

【讨论】：

【解决方案3】：

只需为您的@media 屏幕和（最大宽度：767px）添加关闭花括号。

【讨论】：

【解决方案4】：

应该不是什么大问题，因为您无法在移动设备上调整窗口大小。使用物理设备进行进一步测试，您可能会发现这不是问题。

另外，不推荐使用 device-with 属性仅意味着它将在未来的主要版本中删除，因此在出现更好的方法之前可以安全地继续使用。

【讨论】：