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

Question

在 styles.css 文件中，我使用了媒体查询，其中两个使用了以下变体：

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

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

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

在常规浏览器（Safari、Firefox）中，当我缩小窗口时，网站会按照我想要的布局进行调整大小，然而，在手机上根本没有显示移动端的布局。相反，我只看到默认的CSS。

有人能指点一下我应该怎么做吗？

- redconservatory

---

什么手机？CSS中的媒体查询是一项新特性，不是所有移动电话浏览器都支持它。 - Sparky

iPhone 4，我还在一台安卓手机（2.2 Froyo）上进行测试，分辨率为320 x 480。 - redconservatory

实际上，我在 iPhone 4 上切换到了以下媒体查询，并且它可以正常工作（但我必须更改我的 CSS 来适应更高的分辨率）@media only screen and (-webkit-min-device-pixel-ratio: 2) { }。 - redconservatory

Answer 1

这三条提示都很有用，但看起来我需要添加一个元标签：

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

现在它似乎在Android（2.2）和iPhone上都能正常工作...

- redconservatory

---

实际上 <meta name="viewport" content="width=device-width, initial-scale=1"> 的意思是设置页面在移动设备上的宽度和初始缩放比例。 - Lukas Lukac

@LukasLukac 为什么？ - Jonesopolis

约定俗成，我敢打赌@Jon - emanuel sanga

Answer 2

别忘了将标准的CSS声明放在媒体查询之前，否则查询也无法起作用。

.edcar_letter{
    font-size:180px;
}

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

- The4thIceman

---

实际上，将您的CSS样式按从标准大小到最小大小的递减顺序堆叠。如果您的媒体查询都在同一个文件中，则仍然适用这些规则。 - Phil Andrews

即使我没有为该类声明标准的CSS，这对我仍有效。 - Mason

Answer 3

我在一个新闻网站中使用了Bootstrap，但它在IE8上无法运行。我尝试使用css3-mediaqueries.js这个JavaScript文件解决问题，但仍然不起作用。如果您希望您的媒体查询与此JavaScript文件一起工作，请在CSS的媒体查询行中添加screen。

以下是一个示例：

<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链接行与上面的行一样简单。

- Mohsen

Answer 4

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

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

- Moin Zaman

Answer 5

包含以下类似的 meta 标签会导致浏览器处理视口缩放时出现不同的行为。 <meta content="width=device-width, initial-scale=1" name="viewport" />

- Daksh Patel

Answer 6

今天我遇到了类似的情况。媒体查询未能生效。一段时间后，我发现“and”后面的空格丢失了。

正确的媒体查询应该像这样：

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

- dklog79

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - cimmanon

Answer 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;
   }
}

- X.C.

---

哦，太棒了！谢谢……我尝试了很多修改，但只有这个有效 :) - T.M15

Answer 8

一定要在max-width和min-width后加上像px或rem这样的单位。这对我很有帮助。如果我只写数值而不加单位，浏览器无法读取媒体查询。例如： 错误写法： @media only screen and (max-width:950) 正确写法： @media only screen and (max-width:950px)

- ANURAG BHAKUNI

Answer 9

该贴子的代码片段明显使用了正确的注释标记，但CSS可能会以渐进式的方式出现问题——因此，如果有语法错误，则之后的所有内容都可能失败。有几次我依赖可信赖的来源提供了不正确的注释标记，导致我的样式表出现问题。由于 OP 只提供了他们代码的一小部分，建议执行以下操作：

确保您的所有 CSS 注释都使用这种标记 /* ... */ —— 这是 MDN 根据 CSS 的推荐注释标记

使用 linter 或安全的在线验证器来验证您的 CSS。这里有一个W3的验证器

更多信息： 我去检查了 Bootstrap 4 推荐的最新媒体查询断点，并直接从他们的文档中复制了样板。几乎每个代码块都标有类似 JavaScript 的注释//，这破坏了我的代码——并给我只能通过深入调试才能找到原因的加密编译错误，而这在当时让我感到困惑和沮丧。

IntelliJ文本编辑器允许我使用ctrl + /热键在LESS文件中注释特定的CSS行，这很棒，但是默认情况下会在无法识别的文件类型上插入//。它不是免费软件，而less相当流行，所以我信任它并选择了它。那导致我的代码出错了。有一个偏好设置菜单可用于教它每种文件类型的正确注释标记。

- Cam

---

OP已经使用了正确的注释标记，正如帖子中所示。 - TylerH

实际上，如果你将鼠标悬停在踩按钮上，你会看到它们的具体用途。除此之外，踩是匿名的，而且不是恶意攻击。另外，对某人进行谩骂并不是让他们改变你认为他们做错了什么的方法。 - TylerH

这帮助我修复了我的代码。我之前使用的是//而不是/* */。谢谢。 - JDot

Answer 10

在HTML的头部添加以下标签： <meta content="width=device-width, initial-scale=1" name="viewport" /> 该标签可以使网页在不同设备上显示更加友好和适配。

- Atif Tariq