为什么我的 CSS3 媒体查询在移动设备上不起作用？答案

【问题标题】：Why are my CSS3 media queries not working on mobile devices?为什么我的 CSS3 媒体查询在移动设备上不起作用？
【发布时间】：2011-12-13 03:30:21
【问题描述】：

在styles.css 中，我使用了媒体查询，两者都使用以下变体：

/*--[ Normal CSS styles ]----------------------------------*/

@media only screen and (max-width: 767px) {

    /*--[ Mobile styles go here]---------------------------*/
}

当我缩小窗口时，网站会在常规浏览器（Safari、Firefox）中调整为我想要的布局，但是手机上根本不会显示移动布局。相反，我只看到了默认的 CSS。

谁能指出我正确的方向？

【问题讨论】：

是什么手机？媒体查询是 CSS 中的一个新特性，并不是所有的手机浏览器都支持它...
iPhone 4，我也在 320 x 480 分辨率的 android 手机 (2.2 Froyo) 上进行测试。
实际上我在 iPhone 4 上切换到以下媒体查询并且它可以工作（但我必须更改我的 CSS 以适应更高分辨率）@media only screen 和（-webkit-min-device-pixel -比率：2）{}

标签： html css media-queries mobile-website

【解决方案1】：

这三个都是有用的提示，但看起来我需要添加一个元标记：

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

现在它似乎可以在 Android (2.2) 和 iPhone 上运行...

【讨论】：

其实
@LukasLukac 为什么会这样？
我敢打赌@Jon

【解决方案2】：

不要忘记在媒体查询上方有标准的 css 声明，否则查询也不起作用。

.edcar_letter{
    font-size:180px;
}

@media screen and (max-width: 350px) {
    .edcar_letter{
        font-size:120px;
    }
}

【讨论】：

事实上，让你的 css 样式以从标准到最小尺寸的递减顺序堆叠。如果您的媒体查询都在同一个文件中，则规则仍然适用。
即使我没有该类的标准 css 声明也对我有用。

【解决方案3】：

我怀疑关键字only 可能是这里的问题。我使用这样的媒体查询没有问题：

@media screen and (max-width: 480px) { }

【讨论】：

【解决方案4】：

我在新闻网站中使用了引导程序，但它在 IE8 上不起作用，我使用 css3-mediaqueries.js javascript 但仍然无法正常工作。如果您希望您的媒体查询与此 javascript 文件一起使用，请在 css 中将屏幕添加到您的媒体查询行

这是一个例子：

<meta name="viewport" content="width=device-width" />


<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>

css 链接行如上一行一样简单。

【讨论】：

【解决方案5】：

今天我也遇到了类似的情况。媒体查询不起作用。过了一会儿，我发现'and'后面的空格不见了。正确的媒体查询应如下所示：

@media screen and (max-width: 1024px) {}

【讨论】：

这就是我们有 CSS 验证器的原因。这与这个特定问题无关，因为 OP 已经指出媒体查询实际上在非移动浏览器中工作。

【解决方案6】：

包含像下面这样的元标记会导致浏览器以不同的方式处理视口缩放。

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

【讨论】：

【解决方案7】：

css 代码的顺序也很重要，例如：

@media(max-width:600px){
  .example-text{
     color:red;
   }
}
.example-text{
   color:blue;
}

上面的代码不会工作，因为执行的顺序。需要写成：

.example-text{
   color:blue;
}
@media(max-width:600px){
  .example-text{
     color:red;
   }
}

【讨论】：

天哪！谢谢...尝试了很多修改，但只有这个有效:)

【解决方案8】：

总是在 px 或 rem 等单位中提及 max-width 和 min-width。这让我明白了。如果我在没有单位而只写数值的情况下编写它，浏览器将无法读取媒体查询。例子： 这是错误的 @media 仅屏幕和（最大宽度：950）和 这是对的 @media only screen and (max-width:950px)

【讨论】：

【解决方案9】：

OP 的代码 sn-p 显然使用了正确的注释标记，但 CSS 可能会以渐进方式中断 - 因此，如果出现语法错误，之后的所有操作都可能会失败。有几次我依赖可靠的来源提供了不正确的评论标记，这破坏了我的样式表。由于 OP 只提供了他们代码的一小部分，我建议如下：

确保你所有的 CSS cmets 都使用这个标记 /* ... */ -- which is the correct comment markup for css according to MDN

使用 linter 或安全的在线验证器验证您的 CSS。 Here's one by W3

更多信息：我从 bootstrap 4 检查了最新推荐的媒体查询断点，最后直接从他们的文档中复制了样板。几乎每个代码块都标有 javascript 样式的 cmets //，这破坏了我的代码 - 并且只给了我一些难以解决的编译错误，这在当时让我头疼，让我感到难过。

IntelliJ 文本编辑器允许我使用 ctrl+/ 热键注释掉 LESS 文件中的特定 css 行，这很棒，除了 它默认在无法识别的文件类型上插入 //。它不是免费软件，而且相当主流，所以我信任它并接受它。那破坏了我的代码。有一个首选项菜单可以教它为每种文件类型正确注释标记。

【讨论】：

OP 已经在使用正确的评论标记，如帖子所示。
实际上，如果您将鼠标悬停在否决按钮上，您将看到exactly what they are for。除此之外，否决票是 1) 匿名和 2) 不是拖钓。此外，煽动某人不是让他们改变你认为他们所做的事情的方法。
这帮助我修复了自己的代码。我使用的是// 而不是/* */。谢谢。

【解决方案10】：

如果浏览器缩放级别不正确，也可能发生这种情况。您的浏览器窗口缩放应为 100%。在 Chrome 中使用 Ctrl + 0 重置缩放级别。

【讨论】：

【解决方案11】：

我最近也遇到这个问题，后来发现是因为and和(之间没有加空格。这是错误

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

然后我改成这个来改正

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

【讨论】：

【解决方案12】：

把另一个答案扔进戒指。如果您尝试使用 CSS 变量，那么它会悄悄地失败。

@media screen and (max-device-width: var(--breakpoint-small)) {}

CSS 变量在媒体查询中不起作用（按设计）。

【讨论】：

这将更适合作为评论，因为它只是问题的辅助信息。

【解决方案13】：

我以前从未见过的奇怪原因：如果您在媒体查询之外使用“父 > 子”选择器（在 Firefox 69 中），它可能会破坏媒体查询。我不确定为什么会发生这种情况，但是对于我的情况，这不起作用...

@media whatever {
    #child { display: none; }
}

但是添加父级以匹配页面上方的其他一些 CSS，这可行...

#parent > #child { display: none; }

似乎指定父级无关紧要，因为 id 非常具体，不应该有歧义。也许这是Firefox中的一个错误？

【讨论】：

【解决方案14】：

我根据情况使用了几种方法。在我使用的同一个样式表中：@media (max-width: 450px)，或者单独确保标题中的链接正确。我查看了您的 fixmeup，您有一系列令人困惑的 CSS 链接。它也像你说的那样在 HTC 渴望 S 上发挥作用。

【讨论】：

将再次查看 CSS，谢谢...很高兴知道它适用于某些东西。

【解决方案15】：

@media all and (max-width:320px)and(min-width:0px) {
  #container {
    width: 100%;
  }
  sty {
    height: 50%;
    width: 100%;
    text-align: center;
    margin: 0;
  }
}

.username {
  margin-bottom: 20px;
  margin-top: 10px;
}

【讨论】：

请在您的代码中添加一些解释，展示它如何解决问题 - 这将有助于未来的其他人，并且您的答案更有可能获得投票
虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。

【解决方案16】：

由于不是拼写错误对我不起作用 @media screen and(max-width: 930px) 在 (and) & 左括号 @media screen 和 (max-width: 930px) 之间需要空格

【讨论】：

能否请您尝试写适当的句子以提高可读性。

【解决方案17】：

您需要的唯一解决方法是：

只需在 .CSS 文件末尾获取所有媒体查询

好用，试试吧

【讨论】：

【解决方案18】：

对我来说，我使用的是max-height 而不是max-width。

如果是你，那就去换吧！

    @media screen and (max-width: 350px) {    // Not max-height
        .letter{
            font-size:20px;
        }
    }

【讨论】：

【解决方案19】：

对于遇到相同问题的每个人，请确保您实际上写的是“120px”，而不仅仅是“120”。这是我的错误，它把我逼疯了。

【讨论】：

这只是重复了 Anurag 在 stackoverflow.com/a/59352652/2756409 一年前的回答。

【解决方案20】：

嗯，在我的例子中，宽度值之后的px 丢失了......有趣的是，W3C validator 甚至没有注意到这个错误，只是默默地忽略了定义。

【讨论】：

这只是重复了一年多前 Anurag 在stackoverflow.com/a/59352652/2756409 的回答。

【解决方案21】：

我遇到了同样的问题，结果我的媒体查询顺序错误。它们应该在 CSS 中从最宽到最小定义

【讨论】：