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

Question

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

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

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

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

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

谁能指出我正确的方向？

原文由 redconservatory 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

现在它似乎可以在 Android (2.2) 和 iPhone 中正常工作……

原文由 redconservatory 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

 .edcar_letter{
    font-size:180px;
}

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

原文由 The4thIceman 发布，翻译遵循 CC BY-SA 3.0 许可协议